JavaScriptでアニメーション

手順

以下の二つのファイル

  • test.html
  • test.js

を作成する

test.html

test.js

説明

連続的に描画を行いアニメーションを実現します。
定期的に画面を更新してもらえるように描画の管理をするRendererというオブジェクトを作成しました。

requestAnimationFrame

引数に関数オブジェクトを渡しておくとコールバックとして画面更新の直前に一度だけその関数を呼び出してくれます。
継続的に描画関数を呼び出してほしいので、引数にする関数オブジェクトの中で再度requestAnimationFrameに描画関数を渡しておきます。

bind

新しい関数オブジェクトを生成してくれます。
その関数オブジェクトの内部で使用するthisは引数に指定したオブジェクトに置き換わります。

参考

bind
requestAnimationFrame

シェアする

  • このエントリーをはてなブックマークに追加

フォローする