requestAnimationFrame动画控制详解

我就是我 2022-08-06 11:22 213阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

还在使用setInterval吗，你out了，requestAnimationFrame可以实现更为经济、更加准确的控制动画，今天来看看它的来龙去脉。

![Center][]

## 以往 ##

在web动画、app动画中，我们经常通过setInterval或setTimeout定时修改DOM、CSS实现动画，如下面代码所示。

var timer=setInterval(function(){
       //一些动画
    },1000/60)
    //清除动画
    clearInterval(timer);

不过如此动画的方式极为耗费资源，经常是这样的结果，刚开始比较流畅，5分钟之后动画就卡住了，于是“大家”都看不下去了，开始想各种办法。

## 简介 ##

2011年左右，Paul Irish的《[requestAnimationFrame for Smart Animating][]》首先介绍了requestAnimationFrame的使用，然后经过大家的努力《[Timing control for script-based animations][]》在2013年成为了w3c的候选标准。

requestAnimationFrame的方式的优势如下：

1.经过浏览器优化，动画更流畅

2.窗口没激活时，动画将停止，省计算资源

3.更省电，尤其是对移动终端

requestAnimationFrame的使用方式，简单调用代码如下。

function animate() {
      // Do whatever
      requestAnimationFrame(animate);
      // Do something animate
      
    }
    //go->
    requestAnimationFrame(animate);

有的时候我们必须要加一些控制，requestAnimationFrame也可以像setInterval一样返回一个句柄，然后我们可以取消它。控制动画代码如下。

var globalID;
    function animate() {
      // Do whatever
      globalID=requestAnimationFrame(animate);
      // Do something animate
      
    }
    //when ot start
    	globalID=requestAnimationFrame(animate);
    //when to stop
    	cancelAnimationFrame(globalID);

好了，介绍完了吧。

呃，先别走，对于一个前端开发者，我们不能如此“单纯”，因为浏览器太任性，谁知道这些浏览器都是怎么“想的”，我们要看看浏览器兼容情况。

来，上[CanIUse][]。

![Center 1][]

桌面端除了万恶的IE系列低版本9-，移动端除了Opera Mini和Android Browser4.3-其他都支持。总支持率83.38%，不加前缀支持率81.98%，支持率不错。作为一个富有极客精神的前端er，我们还得继续，拯救那些“手里没钱、手里有权却榆木疙瘩，还在使用低版本浏览器”的同胞，来个polyfill。

## 补丁 ##

Paul Irish的简化版的补丁，补丁和使用如下代码所示。

// 补丁
    window.requestAnimationFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();
    
    
    // 使用
    
    (function animate(){
      requestAnimationFrame(animate);
      //动画
    })();

这个补丁可以较好的兼容支持该特性的浏览器，但是对于不支持的呢？这里讲了怎么添加，如何停止呢？于是我们的补丁还得继续……

有后来，又有了新更新，大家到[github查看详情][github]，代码贴过来，大家研究。

// requestAnimationFrame polyfill by Erik Möller.
    // Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
    
    // MIT license
    
    if (!Date.now)
        Date.now = function() { return new Date().getTime(); };
    
    (function() {
        'use strict';
        
        var vendors = ['webkit', 'moz'];
        for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
            var vp = vendors[i];
            window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
            window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
                                       || window[vp+'CancelRequestAnimationFrame']);
        }
        if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
            || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
            var lastTime = 0;
            window.requestAnimationFrame = function(callback) {
                var now = Date.now();
                var nextTime = Math.max(lastTime + 16, now);
                return setTimeout(function() { callback(lastTime = nextTime); },
                                  nextTime - now);
            };
            window.cancelAnimationFrame = clearTimeout;
        }
    }());

当然，实战的时候我们把这些代码单独放到一个文件中，到这里[下载][Link 1]。

## 案例    ##

最后，我们来个粒子案例，体会体会requestAnimatonFrame的使用。

\------------------------------------------------------------------------------------------------------------------------------------------------------------------------

== 粒子案例== [全屏预览][Link 2]== [在线编辑][Link 3]== [下载收藏][Link 4]==

\------------------------------------------------------------------------------------------------------------------------------------------------------------------------

![1421753008_5358.gif][]

## 参考文献和深入阅读 ##

1. Paul Irish, [requestAnimationFrame for Smart Animating][]

2. MDN, [Window.requestAnimationFrame()][Window.requestAnimationFrame]

3. Chris Coyier, [Using requestAnimationFrame][]

4. Matt West, [Efficient Animations with requestAnimationFrame][]

5. W3C CR, [Timing control for script-based animations][]

6. [Polyfill for requestAnimationFrame/cancelAnimationFrame][github]

7. 张鑫旭, [CSS3动画那么强，requestAnimationFrame还有毛线用？][CSS3_requestAnimationFrame]

8. 朱永盛, [理解WebKit和Chromium: 渲染主循环（main loop)和requestAnimationFrame][WebKit_Chromium_ _main loop_requestAnimationFrame]

感谢您耐心读完，如果对您有帮助，[请支持我][Link 5]

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。

\---------------------------------------------------------------------------------------------------------

[Center]: /images/20220806/ed57e178c8cc4a9e9aaeae9ab28425b8.png
[requestAnimationFrame for Smart Animating]: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
[Timing control for script-based animations]: http://www.w3.org/TR/animation-timing/
[CanIUse]: http://caniuse.com/#feat=requestanimationframe
[Center 1]: /images/20220806/cadbc115b0a1406c9a39f1c36a1e84ab.png
[github]: https://github.com/darius/requestAnimationFrame
[Link 1]: https://github.com/darius/requestAnimationFrame/archive/master.zip
[Link 2]: http://codepen.io/whqet/full/bNWGaj/
[Link 3]: http://codepen.io/whqet/pen/bNWGaj
[Link 4]: http://codepen.io/whqet/share/zip/bNWGaj/
[1421753008_5358.gif]: https://img-my.csdn.net/uploads/201501/20/1421753008_5358.gif
[Window.requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
[Using requestAnimationFrame]: http://css-tricks.com/using-requestanimationframe/
[Efficient Animations with requestAnimationFrame]: http://blog.teamtreehouse.com/efficient-animations-with-requestanimationframe
[CSS3_requestAnimationFrame]: http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
[WebKit_Chromium_ _main loop_requestAnimationFrame]: http://blog.csdn.net/milado_nju/article/details/8101188
[Link 5]: http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content
[whqet]: http://blog.csdn.net/whqet