风火轮旋转动画特效-html代码-BFW代码库

风火轮旋转动画特效

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - Radiation Vibe</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

</head>
<body translate="no">
    <body>
        <canvas id="canvas"></canvas>
    </body>

    <script id=>
        var canvas = document.getElementById("canvas");
        canvas.width = Math.min(window.innerWidth, window.innerHeight);
        canvas.height = canvas.width;
        var gl = canvas.getContext("webgl");

        //Time
        var dt = 0.004;
        var time = 3.0;

        //************** Shader sources **************
        var vertexSource = `
        attribute vec2 position;
        void main() {
        gl_Position = vec4(position, 0.0, 1.0);
        }
        `;

        var fragmentSource = `
        #define PI 3.14159265358979323846
        precision highp float;

        uniform float width;
        uniform float height;
        vec2 resolution = vec2(width, height);
        uniform float time;

        vec2 rotate(vec2 _st, float _angle) {
        _st -= 0.5;
        _st =  mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st;
        _st.y += 0.5;
        _st.x += .5;
        return _st;
        }

        void main(){

        //set up positions and time
        vec2 uv = gl_FragCoord.xy/resolution.xy;
        float t = mod(time, 4.0*PI);
        t = t * sin(PI/5.0);
        vec2 pos = uv;
        pos = vec2(0.5, 0.5)-pos;

        //calculate distances and angles
        float d = length(pos);/*distance from center*/
        float id = 1.0 - d;/*inverse d, greater near the center*/
        float theta = -(atan(pos.y, pos.x));
        float rot = (2.0*PI*(id+1.0))*(t)+(6.0*theta);

        //rotate both positions
        pos = rotate(pos, -rot);
        uv = rotate(uv, -rot);

        //motion
        for(float i = 1.0; i < 12.0; i+=1.0){
        uv.x += .05*(cos(t+id+2.0*i)*uv.y*uv.x);
        uv += t+.05*(cos(t*.1)+sin(t)/d-3.0*i);
        }

        //colors
        vec3 col = -d + 0.5*(cos(id-rot+pos.xyx+vec3(0,2,4)));
        vec3 col2 = id + 0.5*cos(id-cos(uv.xyx+vec3(0,2,4)));
        float arg = (d+rot+uv.x);
        vec3 col3 = mix(col, col2, cos(arg*4.0));
        col2 = id-col2;
        col3 *= col3;
        gl_FragColor = vec4(((col+col+col2/col3))/(col3-col-col2),1.0);
        }
        `;

        //************** Utility functions **************

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            canvas.width = Math.min(window.innerWidth, window.innerHeight);
            canvas.height = canvas.width;
            gl.viewport(0, 0, canvas.width, canvas.height);
            gl.uniform1f(widthHandle, canvas.width);
            gl.uniform1f(heightHandle, canvas.height);
        }


        //Compile shader and combine with source
        function compileShader(shaderSource, shaderType) {
            var shader = gl.createShader(shaderType);
            gl.........完整代码请登录后点击上方下载按钮下载查看