HTML5 requestAnimationFrame( ) 动画API

最新推荐文章于 2025-07-22 18:04:09 发布

王乐平

最新推荐文章于 2025-07-22 18:04:09 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 动画

本文链接：https://blog.youkuaiyun.com/lecepin/article/details/53438363

HTML5 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了requestAnimationFrame API的基本用法和优势，包括如何用它来创建更流畅的动画效果，并提供了兼容不同浏览器的封装代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

当用JS做动画效果时，一般用setTimeout()或setInterval()来进行动画效果的制作，现在好了，出现了一个专门用于处理动画的API——requestAnimationFrame()，表意为“请求动画帧”。

用法

基本语法：

requestAnimationFrame(callback)//callback为回调函数
cancelAnimationFrame(id) //requestAnimationFrame的返回值

requestAnimationFrame参数为一个回调函数，返回ID值。
cancelAnimationFrame用于取消requestAnimationFrame。

可以看到和setTimeout/setInterval的用法差不多。

var globalID; //requestAnimationFrame的返回ID

//动画处理函数
function animate() {
    //动画相关的操作...
    globalID=requestAnimationFrame(animate);//参数为函数回调
}

//使用这个函数进行动画停止操作
cancelAnimationFrame(globalID);

优势

浏览器进行优化，动画更流畅；

按浏览器的时间间隔绘制，动画不会掉帧；

窗口没激活时或标签页不可见时，动画将暂停，省计算资源，减少CPU和内存的压力；

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

兼容性

各浏览器对于API的兼容性：

可以看到，除了IE9-、OpearMini和AndroidBrowser4.3-之外全部都支持，支持率为91.71%，总体还不错。

封装代码

requestAnimationFrame兼容封装代码：

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    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);
        };
}());