requestAnimationFrame Web中写动画的另一种选择

alin 发布于2019-08-26 11:22 / 1947人阅读

摘要：现在又多了一种实现动画的方案，那就是还在草案当中的方法。这个方法就是传递给的回调函数。为回调函数一个简单的例子模拟一个进度条动画，初始宽度为在函数中将进度加然后再更新到宽度上，在进度达到之前，一直重复这一过程。

HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了:

你可以用CSS3的animattion+keyframes;

你也可以用css3的transition;

你还可以用通过在canvas上作图来实现动画，也可以借助jQuery动画相关的API方便地实现;

当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画，前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。

现在又多了一种实现动画的方案，那就是还在草案当中的window.requestAnimationFrame()方法。

初识requestAnimationFrame

来看MDN上对其给出的诠释：

  The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。

也可以说这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

基本语法

可以直接调用，也可以通过window来调用，接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。

requestAnimationFrame(callback)//callback为回调函数

一个简单的例子

模拟一个进度条动画，初始div宽度为1px,在step函数中将进度加1然后再更新到div宽度上，在进度达到100之前，一直重复这一过程。

为了演示方便加了一个运行按钮。

0%


window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
    progress += 1;
    ele.style.width = progress + "%";
    ele.innerHTML=progress + "%";
    if (progress < 100) {
        requestAnimationFrame(step);
    }
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
    ele.style.width = "1px";
    progress = 0;
    requestAnimationFrame(step);
}, false);

浏览器支持情况

既然还是草案状态下引入的一个功能，在使用全我们就需要关心一下各浏览器对它的支持情况了。就目前来说，主流现代浏览器都对它提供了支持。

更为具体的浏览器兼容性可以在这里看到。

Polyfill

Polyfill就是垫片，按发明这个词的人的原话来说，它就是一段这样的代码，让浏览器原生地支持我们期望使用的一些API。

就比如这里的requestAnimationFrame，在看到了上面的浏览器支持情况后，你就知道了比上面列出的浏览器版本老的就不支持该方法，但为了让代码能够有更好的浏览器兼容性在老机器上也能运行不报错，我们可以写一些代码让浏览器在不支持requestAnimationFrame的情况下使用window.setTimeout()，这是一种回退（fallback）到过去的方法。

这样一来，就可以通俗一点的理解polyfill了，它就是备胎。

下面是由Paul Irish及其他贡献者放在GitHub Gist上的代码片段，用于在浏览器不支持requestAnimationFrame情况下的回退，回退到使用setTmeout的情况。当然，如果你确定代码是工作在现代浏览器中，下面的代码是不必的。

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
    var lastTime = 0;
    var vendors = ["ms", "moz", "webkit", "o"];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
        window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
    }
    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };
    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());

上面代码作用有二，一是把各浏览器前缀进行统一，二是在浏览器没有requestAnimationFrame方法时将其指向setTimeout方法。

提到备胎代码呢，这里多说一句，在CSS代码中，我们也经常使用这种回退的技巧，即对同一条CSS规则，编写多条以不同浏览器前缀开头代码，或者编写一条备用样式。

下面是一个CSS中的备胎代码的例子：

div {
    background: rgb(0, 0, 0); /* fallback */
    background: rgba(0, 0, 0, 0.5);
}

代码中设置div背景为黑色带50%的透明度，但IE9-的浏览器是不支持rbga格式的颜色的，所以浏览器会回退到上一条CSS规则应用rgb颜色。

Reference

article about rAF from css tricks

article about rAF from Paul Irish

what is polyfill

setInterval与requestAnimationFrame的时间间隔测试

求索：GSAP的动画快于jQuery吗？为何？

求索：GSAP的动画快于jQuery吗？/ 续 V1.1

by 刘哇勇
编辑 SegmentFault

私有云超融合服务器 requestAnimationFram web服务器选择另一页面阿里云服务器配置web选择

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106990.html

requestAnimationFrame Web中写动画的另一种选择

摘要：现在又多了一种实现动画的方案，那就是还在草案当中的方法。这个方法就是传递给的回调函数。为回调函数一个简单的例子模拟一个进度条动画，初始宽度为在函数中将进度加然后再更新到宽度上，在进度达到之前，一直重复这一过程。 HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...

Prasanta 2019-08-19 14:48 评论0 收藏0
requestAnimationFrame Web中写动画的另一种选择

摘要：现在又多了一种实现动画的方案，那就是还在草案当中的方法。这个方法就是传递给的回调函数。为回调函数一个简单的例子模拟一个进度条动画，初始宽度为在函数中将进度加然后再更新到宽度上，在进度达到之前，一直重复这一过程。 HTML5/CSS3时代，我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition...

piapia 2019-08-22 10:31 评论0 收藏0
three.js 入门详解(二)

摘要：首先，下载并在的中使用然后，我们需要准备一个模型，在函数中，创建变量，用于导入模型导入模型的时候，接受两个参数，第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中。 9. 动画在本章之前，所有画面都是静止的，本章将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库，用来观测每秒帧数...

mrcode 2019-08-05 12:30 评论0 收藏0
three.js 入门详解(二)

摘要：首先，下载并在的中使用然后，我们需要准备一个模型，在函数中，创建变量，用于导入模型导入模型的时候，接受两个参数，第一个表示模型路径，第二个表示完成导入后的回调函数，一般我们需要在这个回调函数中将导入的模型添加到场景中。 9. 动画在本章之前，所有画面都是静止的，本章将介绍如果使用Three.js进行动态画面的渲染。此外，将会介绍一个Three.js作者写的另外一个库，用来观测每秒帧数...

G9YH 2019-08-21 17:51 评论0 收藏0
不得不提的前端性能优化

摘要：对于广大的前端开发人员来说，网站构建本是家常便饭其中也不得不涉及到性能优化的问题。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量按需加载会导致大量重绘，影响渲染性能。对于广大的前端开发人员来说，网站构建本是家常便饭；其中也不得不涉及到性能优化的问题。之前也有接触过，今天总结一下这方面的技巧，下面是我的一下认知，欢迎探讨： Nu...

xushaojieaaa 2019-04-23 13:13 评论0 收藏0