Html5: requestAnimationFrame

[taknegaar]

قبلا برای ساختن انیمیشن های مبتنی بر جاوااسکریپت میشد از setTimeout و setInterval استفاده کرد
اما اگر حالا بخواهید مثلا یه انیمیشنی با 24 فریم در ثانیه و نرم بسازید راه حل جدید requestanimationframe هست:
http://www.w3.org/TR/animation-timing
این متد جدید از لحاظ پرفرمنس بهینه شده برای همین کارها، مخصوصا که سی پی یو یوزیج پایینی داره:

Why better?
The browser can optimize it, so animations will be smoother
Animations in inactive tabs will stop, allowing the CPU to chill
More battery-friendly

http://css-tricks.com/using-requestanimationframe


Better JavaScript animations with requestAnimationFrame

http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/
http://dev.opera.com/articles/view/better-performance-with-requestanimationframe


این متد در همه بروزرهای جدید هست:
http://caniuse.com/requestanimationframe

با این شرط زیر هم

if (!window.requestAnimationFrame

میتونید چک کنید ببینید که اگه بروزری مثل قدیمی ها ساپورتش نمیکنند
از همون روش قدیم استفاده کنید:
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating