直接入正题,关于使用RequestAnimationFrame优化PC端动画效果的N+1个原因如下:
1.与SetTimeout和SetInterval相比,动画更流畅。
先来简单了解下它们:
window.requestAnimationFrame(function); setTimeout(funciton,interval); setInterval(funciton,interval);
RequestAnimationFrame的时间间隔与浏览设备的绘制间隔一致;
SetTimeout和SetInterval的时间间隔可以自己定义。
绘制时间间隔这儿引出了两个问题:
①如果后者绘制时间间隔小于浏览设备的绘制间隔,那么浏览设备重绘时,那一帧怎么执行?
②如果制作动画时需要的时间间隔更长,后者可以轻松实现,如果此时仍旧选择前者,应该怎么实现?
问题1可以这么来回答:
丢帧!!!!!!
我们可以用吃东西来假设,浏览设备相当于mouth,function相当于把食物放进mouth里,浏览设备重绘相当于把嘴闭上嚼东西吃。
SetTimeout和SetInterval是这样的:给嘴里放吃的不看啥时候闭嘴嚼吃的,只管按照设定的时间往嘴里放。如果嘴闭上的时候往嘴里放东西不就掉了么?也就是丢帧。
而RequestAnimationFrame是这样的:什么时候闭嘴开始嚼东西什么时候把食物放进去。
问题2可以这么来回答:
控制时间跨度!!!!!!
这里我们依旧可以沿用之前的假设,再把切换动画的时间间隔设定为咀嚼后的吞咽。
SetTimeout和SetInterval是这样的:不分青红皂白,吃了就吞。
而RequestAnimationFrame是这样的:什么时候闭嘴开始嚼东西什么时候把食物放进去,放进去之后再根据需要进行吞咽。具体这个时间可以通过以下代码来进行控制。
var fps=30; var now; var then = Date.now(); var interval = 1000/fps;//时间间隔 var delta; function gameLoop() { window.requestAnimationFrame(gameLoop); now = Date.now(); delta = now - then; if (delta > interval) { then = now - (delta % interval); DoSomeThing...... } }
2.与CSS3 Animation相比,兼容性更好,能应用的属性更多,支持的动画效果更多。
虽然CSS3实现动画既高效又方便,但是对于IE7-9,想实现兼容就比较难了。
如果特意针对IE7-9再写一套代码,修改起来也很麻烦。
而RequestAnimationFrame可以兼容常用版本浏览器,具体实现方法也有人实现过了,如下:
(function() { var lastTime = 0; var vendors = ['webkit', 'moz','o','ms']; 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.7 - (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); }; } }());
此外,RequestAnimationFrame能应用的属性和支持的动画数量远远大于CSS3 Animation,具体可以查看官方文档。
3.窗口没激活时或标签页不可见时,动画将暂停,省计算资源,减少CPU和内存的压力。
待补充......