requestAnimateFrame初探<br />——洪珊珊<br />
使用方法<br />requestAnimateFrame([callback])<br />回调函数的第一个参数timestamp,为当前时间<br />
示例<br />requestAnimateFrame示例<br />setInterval /setTimeout示例<br />
据说<br />多个定时器之间的调度会对性能有轻微的影响<br />对于一个帧中对DOM的所有操作,只进行一次Layout和Paint<br />如果发生动画的元素被隐藏了,那么就不再去Paint<br />
兼容性<br />requestAnimationFrame = window.requestAnimationFrame ||<br />window.mozRequestAnimationFrame ||<br />window.webki...
参阅资料<br />https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame<br />http://www.chromium.org/developers/des...
Upcoming SlideShare
Loading in …5
×

Request animateframe初探

740 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
740
On SlideShare
0
From Embeds
0
Number of Embeds
172
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Request animateframe初探

  1. 1. requestAnimateFrame初探<br />——洪珊珊<br />
  2. 2. 使用方法<br />requestAnimateFrame([callback])<br />回调函数的第一个参数timestamp,为当前时间<br />
  3. 3. 示例<br />requestAnimateFrame示例<br />setInterval /setTimeout示例<br />
  4. 4. 据说<br />多个定时器之间的调度会对性能有轻微的影响<br />对于一个帧中对DOM的所有操作,只进行一次Layout和Paint<br />如果发生动画的元素被隐藏了,那么就不再去Paint<br />
  5. 5. 兼容性<br />requestAnimationFrame = window.requestAnimationFrame ||<br />window.mozRequestAnimationFrame ||<br />window.webkitRequestAnimationFrame ||<br />window.msRequestAnimationFrame || <br />window.oRequestAnimationFrame ||<br /> function(callback) { setInterval(callback, 1000 / 60); };<br />
  6. 6. 参阅资料<br />https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame<br />http://www.chromium.org/developers/design-documents/requestanimationframe-implementation<br />http://webstuff.nfshost.com/anim-timing/Overview.html<br />

×