requestAnimationFrameでアニメーションをおこなう[canvas]

2017年3月25日

requestAnimationFrameはアニメーション向けの描写に特化したメソッドで、描画処理の実行に対して、ブラウザのアニメーションフレーム更新を適切に調節してくれます。

 

関数を定期的に呼び出すメソッドとしてsetIntervalやsetTimeoutがありますが、この2つのメソッドは、実行しようとする処理の指定した時間(間隔)と、ブラウザの画面を更新する間隔との間にズレが発生しパフォーマンスが低下する懸念が生じてきます。

 

一方、requestAnimationFrameにはフレームレート(fps)を指定する引数はありません。先に述べたように、実行する描画処理に合わせてブラウザ側がフレームレートを適度に調節してくれるからです。

 

具体的なコードで説明します。

 

デモ画面

 

 

21行目

イベントリスナーでページ全体が読み込まれた際にdraw関数が呼ばれるようにしています。

 

関連ページ

イベントハンドラー/イベントリスナーについて

 

30〜41行目

アニメーションで繰り返しおこなう処理(loop関数)です。40行目においてrequestAnimationFrameの引数にコールバック関数として自身であるloop関数を呼び出しループさせています。構造自体はsetTimeoutメソッドの記述方法と同じです。

 

 

スポンサーリンク

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー