requestAnimationFrame
来源:互联网 发布:光猫telnet端口被关闭 编辑:程序博客网 时间:2024/04/29 08:23
If you've never written code to animate inside the browser, you can stop reading :)
原文:http://paulirish.com/2011/requestanimationframe-for-smart-animating/
@首先来个经典的动画函数:
function animate(element, name, from, to, time) {time = time || 800; //默认0.8秒var style = element.style, latency = 60, // 每60ms一次变化 count = time / latency, //变化的次数step = Math.round((to - from) / count), //每一步的变化量 now = from;function go() {count--;now = count ? now + step : to;style[name] = now + 'px';if (count) {setTimeout(go, latency);} } style[name] = from + 'px';setTimeout(go, latency); }姑且不论这个函数的设计存在局限性,如只能对以px为单位的样式进行修改。仅从函数的实现上来看,这可以是一个非常经典的动画理念,其基本逻辑由以下部分组成:获取起点值from和终点值to,通过动画需要进行的时间time,以及每侦间隔latency的要求,计算出值的改变次数count和每次改变的量step。开启setTimeout(fn, latency);来步进到下一侦。在下一侦中,设置属性步进一次,如果动画还没结束,再回到第2步继续下一侦。
这个函数工作得很好,服务了千千万万的站点和系统,事实上jQuery的animate函数的核心也无非是setInterval函数。但是,随着现在系统复杂度的稳步上升,动画效果也越来越多,同时对动画的流畅度也有了更多的重视,这导致上面的函数会出现一些问题。例如同时打开 100个动画效果,根据上面的函数,很明显会有100个定时器在同时运行,这些定时器之间的调度会对性能有轻微的影响。虽然在正常的环境中,这些许的影响 并不会有什么关系,但是在动画这种对流畅度有很高要求的环境下,任何细微的影响都可能产生出不好的用户体验。在这样的情况下,有一些开发者就发明了一种基于统一帧管理的动画框架,他使用一个定时器触发动画帧,不同的动画来注册这些帧,在每一帧上处理多个动 画的属性变化。这样的好处是减少了定时器调度的开销,但是对于动画框架的开发者来说,统一帧管理、提供监听帧的API等,都是需要开发和维护的。
@浏览器的直接支持
最终,浏览器厂商们发现这件事其实可以由他们来做,并且基于浏览器层面,还可以有更多的优化,比如:对于一个侦中对DOM的所有操作,只进行一次Layout和Paint。如果发生动画的元素被隐藏了,那么就不再去Paint。于是,浏览器开始推出一个API,叫做requestAnimationFrame,关于这个函数,MDC的相关页面有比较详细的介绍,简单来说,这个函数有2种使用方法:
1.调用requestAnimationFrame函数,传递一个callback参数,则在下一个动画帧时,会调用callback。
不传递参数地直接调用该函数,启动动画帧,下一个帧触发时,会同时触发window.onmozbeforepaint事件,可以通过注册该事件来进行动画。
2.第2种方法由于依赖于Firefox自己的事件,且beforepaint事件还没进入到标准中,所以不推荐使用,还是使用第1种方式比较好。此时,我们的动画逻辑 可以变成这样:
- 记录当前时间startTime,作为动画开始的时间。
- 请求下一帧,带上回调函数。
- 下一帧触发时,回调函数的第一个参数为当前的时间,再与startTime进行比较,确定时间间隔ellapseTime。
- 判断ellapseTime是否已经超过事先设定的动画时间time,如果超过,则结束动画。
- 计算动画属性变化的差值differ = to - from,再确定在ellapseTime的时候应该变化多少step = differ / time * ellapseTime。
- 计算出现在应该变化到的位置Math.round(from + step),并重新对样式赋值。
- 继续请求下一帧。
function animate(element, name, from, to, time) {time = time || 800; // 默认0.8秒var style = element.style,startTime = new Date;function go(timestamp) {var progress = timestamp - startTime;if (progress >= duration) {style[name] = to + 'px';return;}var now = (to - from) * (progress / duration);style[name] = now.toFixed() + 'px';requestAnimationFrame(go);}style[name] = from + 'px';requestAnimationFrame(go);}到这一步,还剩一个问题,那就是并不是每个浏览器都支持requestAnimationFrame函数的,所以再做一个简单的修正。根据Firefox的特性来看,其mozRequestAnimationFrame提供的最高FPS为60,并且会根据每一帧的计算的耗时来进行调整,比如每一帧计算用了1s,那他只会提供1FPS的动画效果。而Chrome的高版本同样也实现了这个函数,叫webkitRequestAnimationFrame,可以预见未来还会有Opera的oRequestAnimationFrame和IE的msRequestAnimationFrame,所以这里一并做一个简单的兼容处理:
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); };
链接:http://dev.chromium.org/developers/design-documents/requestanimationframe-implementation
<div id="anim">Click here to start animation</div>
#anim {
position:absolute;
left:0px;
width:150px;
height:150px;
background: blue;
font-size: larger;
color: white;
border-radius: 10px;
padding: 1em;
}
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
var elem = document.getElementById("anim");
var startTime = undefined;
function render(time) {
if (time === undefined)
time = Date.now();
if (startTime === undefined)
startTime = time;
elem.style.left = ((time - startTime)/10 % 500) + "px";
}
elem.onclick = function() {
(function animloop(){
render();
requestAnimFrame(animloop, elem);
})();
};
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- requestAnimationFrame
- window.requestAnimationFrame()
- requestAnimationFrame 介绍
- 【神器】requestAnimationFrame
- requestAnimationFrame--进度条
- 动画requestAnimationFrame
- JS-requestAnimationFrame
- 第八周任务3:实现分数类中的运算符重载
- 自定义android循环拖动组件
- Repeater嵌套绑定Repeater
- 使用ViewPager实现高仿launcher拖动效果
- eclipse中如何将web项目自动发布到Tomcat webapps下
- requestAnimationFrame
- μC/OS 之OSTCBInit()
- AndroidManifest.xml的Service元素 android:process设置!!!
- Delph i判断IP地址是否正确
- 腾讯笔试题
- 利用Java编写简单的WebService实例(tomcat+axis未使用myeclipse)
- Viewpager
- Android应用开发提高系列(1)——《Practical Java 中文版》读书笔记(上)
- 抛出异常throw,catch