Request animateframe初探

  • 604 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
604
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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