web动画的方式requestAnimationFrame

最新推荐文章于 2025-01-18 19:10:37 发布

转载最新推荐文章于 2025-01-18 19:10:37 发布 · 408 阅读

前端专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在动画实现中如何利用requestAnimationFrame提高性能，并提供了兼容性解决方案，同时介绍了取消动画的方法。

转载：http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html

在性能上，requestAnimationFrame > setTimeout > setInterval。具体原因大家可以找找相关的资料了解一下。而setTimeout的最小定时值为100/60

我们在实现运动时，从性能与兼容性两方面考虑，常常会如下声明：

var lastTime = 0,
    nextFrame = window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.msRequestAnimationFrame     ||
                function(callback) {
                    var currTime = + new Date,
                        delay = Math.max(1000/60, 1000/60 - (currTime - lastTime));
                    lastTime = currTime + delay;
                    return setTimeout(callback, delay);
                },
    cancelFrame = window.cancelAnimationFrame               ||
                  window.webkitCancelAnimationFrame         ||
                  window.webkitCancelRequestAnimationFrame  ||
                  window.mozCancelRequestAnimationFrame     ||
                  window.msCancelRequestAnimationFrame      ||
                  clearTimeout;