requestAnimationFrame兼容性写法

最新推荐文章于 2024-01-02 18:26:07 发布

转载最新推荐文章于 2024-01-02 18:26:07 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huang-gua/p/10104193.html

本文深入探讨了JavaScript中requestAnimationFrame函数的实现原理，通过代码示例解释了如何使用此函数进行平滑的动画效果创建。文章详细介绍了该函数如何确保浏览器在下一次重绘之前调用指定的回调函数，从而提高动画性能。

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

(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);
        };
}());

转载于:https://www.cnblogs.com/huang-gua/p/10104193.html