LAMPインフルエンサーマーケティングマネジメントマーケティング人事戦略ビジネススキル採用情報メディア掲載情報ニュースリリースイベント情報Web制作アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方2014.11.18アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方おじいちゃん2014.11.18Web制作シェアこんにちは、フロントエンドエンジニアのおじいちゃんです。今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。requestAnimationFrameとはrequestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。引用元:MDNsetTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。requestAnimationFrameの特徴ブラウザの描画更新単位と同じ単位で呼び出される次の再描画が行われる前に次のアニメーションをする関数を呼び出すタブが非アクティブの時はFPSを落とすsetInteval、setTimeoutの特徴ブラウザで準備ができていなくても必ず実行タブが非アクティブの状態でも常に実行これだけを見ると「setTimeoutやsetIntevalでもいいのでは?」と思われるかもしれません。setTimeoutやsetIntevalはタブが非アクティブの状態でも動き続けるため、使い方によってはメモリリークの原因となります。その点、requestAnimationFrameは非アクティブの状態だとFPSを落とすようになっており、メモリの消費を抑えることができます。requestAnimationFrameの使い方まずはrequestAnimationFrameを多くのブラウザで利用するために、prefixの記載が必要になります。requestAnimationFrame;})();requestAnimationFrameの対応状況は以下のようになります。usehttp://caniuse.com/#feat=requestanimationframerequestAnimationFrameの基本的な使い方は下記のようになります。//再描画時の処理})();setTimeoutやsetIntevalはタイマーなのでミリ秒を指定しますが、requestAnimationFrameにはミリ秒指定がありません。冒頭に記載があるのですが、requestAnimationFrameはブラウザの再描画の準備が整ったら次の関数を読み込みます。読み込む速度はブラウザに依存しているため、一定間隔でアニメーションさせたい場合には使いにくくなってしまいます。使い、requestAnimationFrameに経過時間を取得する処理を追記してあげます。requestAnimationFrameを用いて経過時間を知るのは下記のようになります。console.log(status);})();経過時間から対応するフレームを求める方法は、下記でわかりやすく説明されていますのでご参照ください。ネットhttp://yomotsu.net/blog/2013/01/05/fps.htmlcancelAnimationFramerequestAnimationFrameを止めたい場合はcancelAnimationFrameを使います。requestAnimationFrameと同じくprefixを記載してあげます。cancelAnimationFrame;})();requestAnimationFrameの戻り値をcancelAnimationFrameに渡すことで、止めることができます。//戻り値をcancelAnimationFrameに渡してあげる})();jQueryと併用する場合の注意点requestAnimationFrameですが、jQueryでサポートされていません。下記記事でその問題点について挙げられているのでご参照ください。参考:jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意することhttp://0-9.sakura.ne.jp/pub/lt/modest/start.htmlまとめいかがでしたでしょうか。requestAnimationFrameの基本的な使い方は以上になります。requestAnimationFrameを使い、パフォーマンスを意識したアニメーションを実装してみてください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。