canvasのアニメーションTweetこれまでJavaScriptでのアニメーションには、setTimeout()やsetInterval()が使われてきましたが、これらのメソッドはアニメーション用に設計されたわけではないため、色々と問題がありました。現在、W3CのワーキングドラフトにrequestAnimationFrame()が挙がっており、一部のブラウザはベンダープレフィックス付きでサポートを始めています。requestAnimationFrame()を使うことで、処理の高速化や複数のアニメーションの同期といったメリットが期待できます。canvasの描画更新処理requestAnimationFrameを使ったアニメーションのサンプルrequestAnimationFrame()を使った簡単なアニメーションのサンプルを作ってみました。サンプルでは、requestAnimationFrame()でcanvasの描画更新処理を呼び出し、アニメーションさせています。canvas上をクリックするとアニメーションを停止し、再びクリックすると再開します。Mac共にGoogleChrome18.0とFirefox12.0がベンダープレフィックス付きのrequestAnimationFrame()をサポートしています。サポートしていないブラウザも多いですが、下記のように記述することで、未対応のブラウザでもsetTimeout()で代用できるようになります。};}());アニメーションを開始するには、requestAnimationFrame()に描画更新処理を行う関数を渡します。その際、アニメーションを停止することを考慮して、戻り値を変数に格納しておきます。サンプルでは、下記のように描画更新処理を行う関数を再帰処理するようにしています。cancelAnimationFramerequestAnimationFrame()のアニメーションを停止するには、cancelAnimationFrame()を使用します。requestAnimationFrame()と同様に未対応のブラウザがあるため、下記のように記述して、対応していないブラウザではclearTimeout()を実行するようにしておきます。};}());下記は、canvasがクリックされた時に呼ばれるメソッドです。cancelAnimationFrame()の引数にrequestAnimationFrame()の戻り値を渡すことでアニメーションを停止します。canvasでアニメーションを表示するには、描画の前にcanvasをクリアする必要があります。下記は、サンプルの描画更新処理を行う関数ですが、clearRect()でcanvasをクリアしてから描画を行っています。この関数をrequestAnimationFrame()に登録した関数から呼び出すことで、ブラウザの画面更新のタイミングでcanvasを更新し、アニメーションしているように見せています。