requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー

JavaScript

より適切なものが追加されたのでそっちを使いましょう。
setInterval/setTimeout → requestAnimationFrame;

これまでは setInterval

function render(){
	// アニメーション 1フレーム分の処理
}
setInterval(render, 1000 / 60);

これはもう古い。

これからは requestAnimationFrame

function animationLoop(){
	render();
	requestAnimationFrame(animationLoop);
}
animationLoop();

こうすべし。

requestAnimationFrameにすると何がいいの？

  • 複数のアニメーション描写処理を一つにまとめて最適化してくれる
    • 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくなる
    • CSS transitionsとかSVG SMILと同期が取られる
  • 不要な場合にアニメーションループを行わない
    • ブラウザのタブが裏に回って非表示になってるときとかは処理しない
      • CPU,GPUにやさしい
      • バッテリーもちが良くなってノートPCの人とかうれしい
  • 軽い
    • 特にwebkit系のブラウザで効果が高いらしい

requestAnimationFrameなんてオブジェクトねーよ！だまされた！

まだベンダプレフィックスが付いてたりします。

// 各ブラウザ対応
window.requestAnimationFrame = (function(){
	return window.requestAnimationFrame		||
		window.webkitRequestAnimationFrame	||
		window.mozRequestAnimationFrame		||
		window.oRequestAnimationFrame		||
		window.msRequestAnimationFrame		||
		function(callback, element){
			window.setTimeout(callback, 1000 / 60);
		};
})();

サンプル

requestAnimationFrame - jsdo.it - share JavaScript, HTML5 and CSS

参考：http://paulirish.com/2011/requestanimationframe-for-smart-animating/

追記 (2011/05/27)

使いましょうと言っといてあれですが

requestAnimationFrameは、Non-standardであり、実験的な機能であり、仕様は流動的です。
もともとの@paul_irishのコードではplyfill*1に別の名前が使われています。

I am using 'requestAnimFrame` here because since the spec is still in flux, I don't want to make a straight polyfill, yet.
'requestAnimFrame'という名前を使ってるけど、仕様が依然流動的だから、まだストレートなpolyfillは作りたくないんだ。

実際、特徴としてあげた点の一部をとっても各ブラウザの実装はばらばらです
  • タブが非表示になったら描写が止まる
    • Chrome12 止まる、というかsetTimeoutでも止まる ← コメントで指摘してもらいました「setTimeoutもタブがおもてにあるときは5msぐらいでも裏にあるときはかなり長く(ブラウザによっては1s)になったはず」。確かに止まってはいなくてゆーっくり進んでました＞＜
    • Firefox4 止まる
    • Safari5 止まらない
  • 60fpsに近い同期的な描写

サンプル → http://jsfiddle.net/calpo/H7EEE/

それでも使えるところから使っていきましょう

特にゲーム系のプログラムには重要なものだと思うのでいっぱい使ってフィードバックしたいところ。
ゲームとrequestAnimationFrameについてはこちらの記事が面白かったです。
JavaScript でゲームループを作る (The Game Loop) - t100のプログラミング脱出作戦

*1:A shim that mimics a future API providing fallback functionality to older browsers. by paul_irish. 将来のAPIを模倣して、古いブラウザへのフォールバックを提供する調整役