requestAnimationFrame()方法实现帧动画

客官°小女子只卖身不卖艺 2022-04-16 02:12 280阅读 0赞

**目录**

requestAnimationFrame()方法

计时器对比

requestAnimationFrame  示例

requestAnimationFrame  旋转元素

requestAnimationFrame 自由运动

Canvas + Image 渲染动画

--------------------

# requestAnimationFrame()方法 #

1、window.requestAnimationFrame() 全局函数用于请求浏览器调用指定的回调函数以在下次重绘渲染之前更新动画。

2、requestAnimationFrame() 方法语法：window.requestAnimationFrame(callback);

<table> 
 <tbody> 
  <tr> 
   <td style="width:132px;"><span style="color:#f33b45;"><strong>参 数：</strong>callback</span></td> 
   <td> <p>告诉浏览器下一次渲染之前需要调用的函数，而通常显示器的刷新频率是 60Hz，即每秒重绘 60次，所以只要在回调函数中继续调用&nbsp;requestAnimationFrame(callback) 执行自己，就能达到约每秒执行 60 次回调函数。</p> <p><span style="color:#f33b45;">&nbsp;回调函数不能带参数。</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:132px;"><span style="color:#f33b45;">返回值</span></td> 
   <td>返回一个 long 整数值，即请求 ID，用于唯一标识回调列表中的条目，这是一个非零值，可以向window.cancelAnimationFrame(id) 传递此值以取消刷新回调请求。</td> 
  </tr> 
 </tbody> 
</table>

**浏览器兼容性：**

<table> 
 <thead> 
  <tr> 
   <td>&nbsp;</td> 
   <th colspan="6">电脑端</th> 
   <th colspan="6">移动端</th> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <th>Chrome</th> 
   <th>Edge</th> 
   <th>Firefox</th> 
   <th>Internet Explorer</th> 
   <th>Opera</th> 
   <th>Safari</th> 
   <th>Android webview</th> 
   <th>Chrome for Android</th> 
   <th>Edge Mobile</th> 
   <th>Firefox for Android</th> 
   <th>Opera for Android</th> 
   <th>iOS Safari</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>基本支持</th> 
   <td>支持：24</td> 
   <td>支持</td> 
   <td>支持：23</td> 
   <td>支持：10</td> 
   <td>支持：15</td> 
   <td>支持：6.1</td> 
   <td>支持</td> 
   <td>支持：25</td> 
   <td>支持</td> 
   <td>支持：23</td> 
   <td>支持：15</td> 
   <td>支持：7.1</td> 
  </tr> 
  <tr> 
   <th>返回值</th> 
   <td>支持：23</td> 
   <td>支持</td> 
   <td>支持：11</td> 
   <td>支持：10</td> 
   <td>支持：15</td> 
   <td>支持：6.1</td> 
   <td>支持</td> 
   <td>支持：25</td> 
   <td>支持</td> 
   <td>支持：14</td> 
   <td>支持：15</td> 
   <td>支持：6.1</td> 
  </tr> 
 </tbody> 
</table>

# 计时器对比 #

1、JS 动画都是通过在很短的时间内不停的渲染/绘制元素做到的，所以计时器一直是 Javascript 动画的核心技术，所以动画的关键就是刷新的间隔时间。刷新间隔需要尽量短，这样才能动画效果显得平滑流畅，如流水等，同时刷新间隔又不能太短，这样才能确保浏览器有能力渲染动画。

2、大多数电脑显示器的刷新频率是 60Hz，即每秒重绘 60次，而大多数浏览器都会对重绘操作加以限制，从而不超过显示器的重绘频率，因为即使超过显示器的频率上限，用户体验也难有提升。因此平滑动画的最佳循环间隔是通常是 1000ms/60，约等于16.6ms

3、与 setTimeout 和 setInterval 不同，requestAnimationFrame 不需要程序员自己设置时间间隔。setTimeout 和 setInterval 的问题是精确度低。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器 UI 线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行。

4、 requestAnimationFrame 采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

5、requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

6、requestAnimationFrame 对于隐藏或不可见元素，将不会进行重绘或回流，就意味着使用更少的 CPU、GPU 和内存使用量。

7、requestAnimationFrame 是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

# requestAnimationFrame  示例 #

# requestAnimationFrame  旋转元素 #

![20181115181306601.gif][]

如上图所示动画效果代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1 {
                width: 300px;
                height: 200px;
                background-color: #888888;
                position: relative;
            }
    
            .div2 {
                width: 200px;
                height: 50px;
                background-color: #122b40;
                position: absolute;
                left: calc(50% - 100px);
                top: calc(50% - 25px);
    
                /* 旋转元素，Internet Explorer 10、Firefox*/
                transform: rotate(0deg);
                /**浏览器兼容*/
                /* Internet Explorer */
                /*-ms-transform: rotate(45deg);*/
                /* Firefox */
                /*-moz-transform: rotate(45deg); */
                /* Safari 和 Chrome */
                /*-webkit-transform: rotate(45deg); */
                /* Opera */
                /*-o-transform: rotate(45deg); */
            }
        </style>
    
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            /**rotateDeg:旋转的角度
             * frameId：帧动画执行回调函数之前请求浏览器的
             */
            var rotateDeg = 1;
            var frameId = -1;
            /**
             * 旋转元素-动画效果
             */
            var rotateImg = function () {
                console.log(frameId);
                /**设置元素 css 旋转属性，改变角度*/
                $(".div2").css("transform", "rotate(" + rotateDeg + "deg)");
                /**将角度加1度*/
                rotateDeg += 1;
                /**再次回调自己*/
                frameId = requestAnimationFrame(rotateImg);
            };
    
            $(function () {
                /**开始动画*/
                $("#start").click(function () {
                    rotateImg();
                });
    
                /**结束动画*/
                $("#stop").click(function () {
                    cancelAnimationFrame(frameId);
                });
    
            });
        </script>
    </head>
    <body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <button id="start">开始动画</button>
    <button id="stop">暂停动画</button>
    </body>
    </html>

# requestAnimationFrame 自由运动 #

![20181116151604709.gif][]

实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>直线运动</title>
    
        <style type="text/css">
            .divContent {
                display: inline-block;
                width: 300px;
                height: 100px;
                background-color: #333333;
                margin-left: 100px;
                border-radius: 10px;
            }
        </style>
    
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script type="module">
    
            /**画第一个圆—————动画版
             * x：圆形中心的 x 坐标，动态将它从0变化到画布的宽度，超过画布宽度时，再从0开始，从而达到动画效果
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             */
            let x = 0;
            let drawArc1 = function (canvas, ctx) {
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 *
                 * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
    
                /**1)设置路径将要填充的颜色
                 * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
                ctx.fillStyle = "#f00";
    
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
    
                /**3）创建弧线/曲线
                 * true 表示逆时针绘制，false 或者不写为顺时针*/
                ctx.arc(x, canvas.height / 2, 10, 0, 2 * Math.PI, true);
    
                /**4）绘制定义好的路径
                 * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
                ctx.fill();
    
                /**
                 * 将结束角度 + 0.1，然后如果已经达到 360度，则归零
                 * 使用 requestAnimationFrame 实现帧动画，每秒约 60 次的循环回调 drawArc2 方法
                 * @type {number}
                 */
                x = x + 1;
                if (x >= canvas.width) {
                    x = 0;
                }
    
                /**在帧动画中回调自己
                 */
                requestAnimationFrame(function () {
                    drawArc1(canvas, ctx);
                });
            }
    
            /**画第二个圆—————动画版
             * startX、startY 为下一次帧动画的圆形中心坐标，初始化完成后，会在方法中动态修改
             * flagX、flagY 是圆心坐标下一步将要增加还是减小的标识，比如超过画布时需要减小，小于画布尺寸时要增加
             * arcR：圆形的半径值
             * canvas：画布在整个过程中是不变的，所以作为参数传入，避免重复获取
             * ctx：画布上下文
             */
            let startX, startY = 0;
            let flagX = 0, flagY = 0;
            let arcR = 10;
            let drawArc2 = function (canvas, ctx) {
                /**
                 * 动态设置画布的宽、高。注意 Canvas 的 width、height的值只能是纯数字，不能带单位
                 * 如下所示，让画布填充父元素
                 *
                 * 为画布设置宽(width)与高(height)，它会先清除整个画布内所有的旧像素
                 * 相当于调用 context.clearRect(0,0,canvas.width,canvas.height); 方法
                 * 如果每次需要重新渲染，则需要清除旧像素；如果是叠加绘图，则不需要清除旧像素
                 * */
                canvas.width = $(".divContent").css("width").replace("px", "");
                canvas.height = $(".divContent").css("height").replace("px", "");
    
                /**1)设置路径将要填充的颜色
                 * fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式*/
                ctx.fillStyle = "#f00";
    
                /**2）开始一条新路径
                 * beginPath() 方法开始一条路径，或重置当前的路径*/
                ctx.beginPath();
    
                /**3）创建弧线/曲线
                 * true 表示逆时针绘制，false 或者不写为顺时针*/
                ctx.arc(startX, startY, arcR, 0, 2 * Math.PI, true);
    
                /**4）绘制定义好的路径
                 * fill() 方法填充当前的图像（路径）,默认颜色是黑色。*/
                ctx.fill();
    
                /**圆心的坐标是以画布左上角为参考的，画布左上角为(0,0)，向右为 x 的正坐标，向下为 y 的正坐标
                 * 所以当圆形在 y 轴方向超出画布时，圆形的 y 坐标就要减小，反正增加，X 方向同理
                 */
                if (startY > canvas.height) {
                    flagY = 1;
                } else if (startY < 0) {
                    flagY = 0;
                }
    
                if (startX > canvas.width) {
                    flagX = 1;
                } else if (startX < 0) {
                    flagX = 0;
                }
    
                switch (flagY) {
                    case 0:
                        startY += Math.random() * 2;
                        break;
                    case 1:
                        startY -= Math.random() * 2;
                }
    
                switch (flagX) {
                    case 0:
                        startX += Math.random() * 2;
                        break;
                    case 1:
                        startX -= Math.random() * 2;
                }
    
                /**帧动画中回调自己
                 */
                requestAnimationFrame(function () {
                    drawArc2(canvas, ctx);
                });
            }
    
            $(function () {
                /**获取第一张画布*/
                let canvas1 = document.getElementById("myCanvas1");
                /**获取画布上下文*/
                let ctx1 = canvas1.getContext("2d");
                drawArc1(canvas1, ctx1);
    
                /**获取第二张画布*/
                let canvas2 = document.getElementById("myCanvas2");
                /**获取画布上下文*/
                let ctx2 = canvas2.getContext("2d");
    
                /**随机生成圆形产生的起始坐标，即出现的位置*/
                startX = Math.random() * canvas2.width;
                startY = Math.random() * canvas2.height;
                drawArc2(canvas2, ctx2);
            });
        </script>
    
    </head>
    <body>
    
    <div class="divContent">
        <canvas id="myCanvas1">
            浏览器不支持 Canvas
        </canvas>
    </div>
    
    <div class="divContent">
        <canvas id="myCanvas2">
            浏览器不支持 Canvas
        </canvas>
    </div>
    
    </body>
    </html>

# Canvas + Image 渲染动画 #

![20181116182859999.gif][]

代码请参考[《canvas drawImage() 方法绘制图片与视频》][canvas drawImage_]中的 “画布上实时渲染动画” 部分。

[20181115181306601.gif]: /images/20220416/e158db3276e44962beeb58172408ce64.png
[20181116151604709.gif]: /images/20220416/105d83a76b454e87993c3f3c5b40fc79.png
[20181116182859999.gif]: /images/20220416/75aea065e2284f049a584e35bafd8340.png
[canvas drawImage_]: https://blog.csdn.net/wangmx1993328/article/details/84070256#t7