网页高性能图形编程（三）04-WebGL动画-绘制旋转的动画三角形 & 动画-以连贯的、平滑的方式进行过渡变化 & 屏幕刷新频率-（大于）60Hz的屏幕每16.7ms刷新一次

最新推荐文章于 2023-08-21 08:59:34 发布

viceen

最新推荐文章于 2023-08-21 08:59:34 发布

阅读量394

点赞数

分类专栏：可视化文章标签： js canvas

本文链接：https://blog.csdn.net/weixin_44867717/article/details/119284558

版权

可视化专栏收录该内容

130 篇文章 77 订阅

订阅专栏

第4章-WebGL动画

03-图形的缩放

动画实现

需求：制作一个按旋转三角形的动画

效果：

在这里插入图片描述

屏幕刷新频率

 图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，一般是60Hz的屏幕每16.7ms刷新一次。

动画原理

图像被刷新时，引起以连贯的、平滑的方式进行过渡变化。

核心方法

requestAnimationFrame(callback)
//执行一个动画,并在下次绘制前调用callback回调函数更新该动画

实例-绘制旋转的动画三角形

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="cvs" width="200" height="200" style="border: dashed 1px red">
        你的浏览器不支持画布元素
    </canvas>
    <script type="text/javascript">
        //获取画布元素
        var cvs = document.getElementById("cvs");
        //获取到元素的上下文环境对象
        var gl = cvs.getContext('webgl');

        //顶点着色器变量
        var VSHADER_SOURCE =
            //使用存储限定符定义一个接受顶点坐标的变量
            'attribute vec4 a_Position;' +
            'uniform float u_CosB,u_SinB;' +
            'void main() {' +

            //定义点的坐标并转换成变量保存
            'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' +
            'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' +
            'gl_Position.z= a_Position.z;' +
            'gl_Position.w = 1.0;' +
            '} ';

        //片段着色器变量
        var FSHADER_SOURCE =

            'void main() {' +
            //设置图形像素的颜色并保存
            'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +

            '}';

        //新建一个用于装顶点字符串的着色器对象
        var vertShader = gl.createShader(gl.VERTEX_SHADER);
        //加载保存好的顶点代码字符串变量
        gl.shaderSource(vertShader, VSHADER_SOURCE);
        //编译顶点着色器
        gl.compileShader(vertShader);

        //新建一个用于装片段字符串的着色器对象
        var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
        //加载保存好的片段代码字符串变量
        gl.shaderSource(fragShader, FSHADER_SOURCE);
        //编译片段着色器
        gl.compileShader(fragShader);

        //新建一个程序
        var shaderProgram = gl.createProgram();

        //分别附加两个已编译好的着色器对象
        gl.attachShader(shaderProgram, vertShader);
        gl.attachShader(shaderProgram, fragShader);

        //链接两个附件加好的着色器程序
        gl.linkProgram(shaderProgram);
        //开启程序的使用
        gl.useProgram(shaderProgram);
        //定义一个类型数组保存顶点坐标值
        var vertices = new Float32Array([
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ]);
        //先创建一个缓存对象
        var vertexBuffer = gl.createBuffer();
        //说明缓存对象保存的类型
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //写入坐标数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        //获取到顶点着色器中变量
        var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
        //将坐标值赋值给变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
        //开启变量值的使用
        gl.enableVertexAttribArray(a_Position);

        function draw(ANGLE) {
            //将角度转成弧度用于函数的计算
            var radian = Math.PI * ANGLE / 180.0;
            //计算并保存正弦和余弦的值
            var cosB = Math.cos(radian);
            var sinB = Math.sin(radian);
            //从顶点着色器中分别取出这是并保存
            var u_CosB = gl.getUniformLocation(shaderProgram, 'u_CosB');
            var u_SinB = gl.getUniformLocation(shaderProgram, 'u_SinB');
            //将保存好的函数值赋给变量
            gl.uniform1f(u_CosB, cosB);
            gl.uniform1f(u_SinB, sinB);
            gl.clear(gl.COLOR_BUFFER_BIT);
            //绘制指定位置的图形
            gl.drawArrays(gl.TRIANGLES, 0, 3);
        }
        // 获取旋转前时间
        var cur_time = Date.now();
        // 旋转角度(度/秒)
        var ANGLE_STEP = -10.0;
        // 初始状态角度值
        var ANGLE_INIT = 20.0;
        // 执行时的角度值
        var ANGLE_ACT = 0.0

        function animate(c1, a1, a2) {
            // 计算距离上次调用经过了多长时间
            var act_time = Date.now();
            //得到这一次调用与上一次调用的时间间隔
            var dif_time = act_time - c1;
            c1 = act_time;
            var ANGLE_NEW = a1 + a2 * (dif_time / 1000.0);
            //返回一个始终是小于360°的角度
            return ANGLE_NEW %= 360;
        }

        function tick() {
            ANGLE_ACT = animate(cur_time, ANGLE_INIT, ANGLE_STEP);
            console.log(ANGLE_ACT);
            draw(ANGLE_ACT);
            window.requestAnimationFrame(tick);
        }
        tick();
    </script>
</body>

</html>

效果-动画形式-顺时针旋转

在这里插入图片描述

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页高性能图形编程（三）04-WebGL动画-绘制旋转的动画三角形 & 动画-以连贯的、平滑的方式进行过渡变化 & 屏幕刷新频率-（大于）60Hz的屏幕每16.7ms刷新一次

第4章-WebGL动画03-图形的缩放动画实现需求：制作一个按旋转三角形的动画效果：屏幕刷新频率图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，一般是60Hz的屏幕每16.7ms刷新一次。动画原理图像被刷新时，引起以连贯的、平滑的方式进行过渡变化。核心方法requestAnimationFrame(callback)//执行一个动画,并在下次绘制前调用callback回调函数更新该动画实例-绘制旋转的动画三角形<!DOCTYPE html>
复制链接

扫一扫