码迷,mamicode.com
首页 > 其他好文 > 详细

实现Animating使用requestAnimationFrame,尽量不用setInterval,setTimeout

时间:2015-02-05 00:46:07      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

requestAnimationFrame(基于脚本的动画的控制),最初是在某html5教程里看到的,是用来代替setInterval(),setTimeout()进行绘制动画更平滑更高效的方法。
 
requestAnimationFrame 方法可以解决丢失帧的问题,因为它使应用能够在浏览器需要更新页面显示时(而且仅在这种情况下)获得通知。 因此,应用可与浏览器的绘制时间间隔保持完全一致,并且仅使用适量的资源。从 setTimeout 切换到 requestAnimationFrame 非常容易,因为它们都规划单个回调。要实现持续的动画,请在调用动画函数后再次调用 requestAnimationFrame。
 
此方法的普通JS实现如下:
 1 // handle multiple browsers for requestAnimationFrame()
 2 window.requestAFrame = (function () {
 3     return window.requestAnimationFrame ||
 4             window.webkitRequestAnimationFrame ||
 5             window.mozRequestAnimationFrame ||
 6             window.oRequestAnimationFrame ||
 7             // if all else fails, use setTimeout
 8             function (callback) {
 9                 return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
10             };
11 })();
12  
13 // handle multiple browsers for cancelAnimationFrame()
14 window.cancelAFrame = (function () {
15     return window.cancelAnimationFrame ||
16             window.webkitCancelAnimationFrame ||
17             window.mozCancelAnimationFrame ||
18             window.oCancelAnimationFrame ||
19             function (id) {
20                 window.clearTimeout(id);
21             };
22 })();

 

使用此方法,为了得到更好的效果,可以配合window.performance.now()来获取当前时间,它是一个DOMHighResTimeStamp,是从页面导航开始时测量的高精确度时间,以毫秒为单位,精确到千分之一毫秒。此时间值不直接与 Date.now() 进行比较,后者测量自 1970 年 1 月 1 日至今以毫秒为单位的时间。将时间值从 DOMTimeStamp 更改为 DOMHighResTimeStamp 是 W3C 针对基于脚本动画计时控制规范的最新编辑草案中的最新更改。
 
参考:
 

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

实现Animating使用requestAnimationFrame,尽量不用setInterval,setTimeout

标签:

原文地址:http://www.cnblogs.com/yxzblue/p/4273520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!