用requestAnimationFrame优化你的javascript动画

有了css3，我们不在需要Flash来制作好看的动画，一般情况下，我们甚至不需要javascript。但是css3 在一些案例中有些不足。如果你需要计算或重新计算你的动画，那就离不开javascript。尽管不必使用setTimeout 和 setInterval。这样做的缺点是在定义的时间间隔简单地重复一个函数。对于动画，定义的时间间隔不是让他们工作的最好方式。如果您已经使用了这2个函数，您可能已经遇到了困难，在寻找与所需的动画步骤的时间间隔的值。此外，setTimeout和setInterval很少显示同步的刷新率，从而导致效果动画不能准确给出。

requestanimationframe浏览器里的 API

介绍html5中名叫requestanimationframe的一种选择。除了一个例外，它的运作模式和之前的函数非常相似。用下边的代码而不是设置刷新速率的间隔，在浏览上进行。在setTimeout和setInterval的比较尤其明显。当浏览器上有一个以上的动画运行时，就会感觉不流畅。而requestanimationframe会降低这个每帧的速度，必要时，保持动画的流畅。

1. var schritt = 0;
2. function animation() {
3. schritt += 10;
4. document.getElementById("element").style.left = schritt + "px";
5. window.requestAnimationFrame(animation);
6. }
7. window.requestAnimationFrame(animation);

 

在这个例子中，我们让一个元素从左到右每10px动一次。默认的速度通常是每秒60帧。

由于CPU的不同，可能会有差异。浏览器也不是有一个固定的帧速率。requestanimationframe的另一个优点是，只在可见的窗口或选项卡动画运行。当动画被发现在一个窗口或标签，是不活跃的时候，动画会停止，但自动恢复后的窗口或标签时，会再次运行。想要手动的停止动画， 可以使用cancelAnimationFrame这个函数。

加厂商前缀浏览器才能支持

在写这篇文章时，当时只有WebKit，Mozilla最新的Internet Explorer支持requestanimationframe函数。cancelanimationframe函数目前限于Mozilla。由于函数是比较新的，每个浏览器都需要一个不同的语法。你可以使用一个变量来设置相应的前缀：

1. var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

 

 

结论：动画的性能靠requestAnimationFrame本身的功能来实现，他们是非常简单，速度更快，更可靠。因此，你应该尽可能选择这种方法，而不是使用传统的方法，对老的浏览器实行兼容策略。特别是移动端的用户将会从这个方法中感受到好处。如果你正在寻找一个好的测试比较，首选微软的IE开发测试。

原文链接；http://www.gbtags.com/gb/share/9628.htm