MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
requestAnimationFrameの基本的な書き方と使用例を学んでみた。

requestAnimationFrameの基本的な書き方と使用例を学んでみた。

公開日:2021年06月30日
最終更新日:2021年06月30日
d.kitahama
テクノロジー
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > requestAnimationFrameの基本的な書き方と使用例を学んでみた。

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
requestAnimationFrameの基本的な書き方と使用例を学んでみた。
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
こんにちは、エンジニアのはまたです!
今回は、requestAnimationFrameについて学んでいきたいと思います。

 

requestAnimationFrameは2013年ごろから使われており、
ベテランエンジニアの方々にとっては割と古い書き方かもしれません。
ですが、今回この記事を書こうと思った理由は、主に以下の3点です。
  • 若手エンジニアの中ではまだあまり知らない方がおられる
  • 自分自身何気なく使っているが、まだ完全に理解して使っているわけではない
  • 現在でも幅広く利用されている
などの理由からこの記事を書こうと思いました。
至らない点等あるかと思いますが温かい目で読んでいただければ幸いです!
それでは本編へ移ります。

requestAnimationframeとは

window.requestAnimationFrame() メソッドは、ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。
参照:MDN

 

まあ要約すると、ブラウザの描画に合わせて最適なタイミングでよしなにコールバック関数を実行してくれるっていうことですね。

 

ブラウザは1秒間に60回(フレームレート60fps)の再描画が行われるので、1000ms/60=16.666...となるため、約16msに1回フレームが更新されます。
requestAnimationFrameは、16msに1回行われるフレームの更新タイミングと被らずに実行してくれるため、フレームの更新を邪魔せず、結果パフォーマンスが向上するというわけです。
画面が非アクティブ時には実行されないという利点もあります。
ただし、どんな状態でも60fpsを保証するものではないようですのでそこは注意ですね。

基本的な書き方

それでは、概要はここまでとして基本的な書き方をご紹介いたします。
例として繰り返し実行したいケースをご紹介します。
const oneSecondLog = () => console.log("1秒経過");
const testFn = num => {
 // 繰り返したい処理を書く
 console.log("実行");
 window.requestAnimationFrame(testFn); // 関数の中で呼び出す
}
setInterval("oneSecondLog()", 1000);
testFn(); // 関数を実行
引数には繰り返し処理をしたい関数名を指定します。
これで繰り返し処理を実行することが可能です。
上記のコードをコピペすると1秒間に60回の処理が走ることを確認できると思います。

具体的な使用例

よくスクロールに合わせて処理をさせる際に使用する例がこちらです。
windowオブジェクトのpageYOffsetrequestAnimationFrameの処理ごとに取得しています。

キャンセル処理の例

cancelAnimationFrame()を使えばrequestAnimationFrame()の繰り返し処理を中止させることができます。
基本的な使い方は、引数にrequestAnimationFrame()の返り値を指定することで使用できます。
先ほどの具体的な使用例であげたコードを使って使用したデモがこちらになります。

 

ブラウザの対応状況

requestAniamtionFrame()cancelAnimationFrame()のブラウザの対応状況です。
言わずもがなだと思いますが例に習ってCan I useで調べてみましたが、
結果ほとんどのブラウザで対応されているようなので心配なく使えると思います。

まとめ

以上、requestAnimationFrame()の書き方と使用例でした。
今回はスクロール時のアニメーションを例にあげさせてもらいましたが、
装飾をちまちま動かし続けたいといったケースなどには重宝しそうだと思いました。
この記事が誰かの役に立てれば幸いです。
ここまで読んでいただきありがとうございました!
以上、はまたでした!

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JSでのFunctional Programmingの原則と書き方
テクノロジー
プログラミング
公開日: 2021年10月04日
最終更新日: 2021年10月04日
JSでのFunctional Programmingの原則と書き方
t.yoshioka

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイトのちょっとしたテスト用ツールを作った
テクノロジー
プログラミング
公開日: 2017年02月21日
最終更新日: 2017年02月21日
Webサイトのちょっとしたテスト用ツールを作った
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
テクノロジー
プログラミング
公開日: 2017年12月06日
最終更新日: 2017年12月06日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
プログラミング
公開日: 2020年02月18日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] プロトタイプについて – [1] 概要
  • # ES6
  • # JavaScript
  • # プロトタイプ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
Webデザイン
テクノロジー
ホームぺージ更新
マークアップ
設計
公開日: 2018年02月16日
最終更新日: 2018年02月16日
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
プロから評判が高い!エックスサーバーの特徴や利用者の生の声
システム
テクノロジー
公開日: 2020年04月16日
最終更新日: 2020年04月16日
プロから評判が高い!エックスサーバーの特徴や利用者の生の声
  • # エックスサーバー
  • # 評判
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WordPressで簡単な機能を追加する時のTIPS
プログラミング
公開日: 2017年09月30日
最終更新日: 2017年09月30日
WordPressで簡単な機能を追加する時のTIPS
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
IT系勉強会に参加して輪を広げよう!
Webデザイン
テクノロジー
プログラミング
マーケティング
公開日: 2017年11月08日
最終更新日: 2017年11月08日
IT系勉強会に参加して輪を広げよう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
テクノロジー
デザイン
マークアップ
公開日: 2021年04月22日
最終更新日: 2021年04月22日
コピペ実装!CSSだけでフォームのUI改善**サンプルコード7選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
[JavaScript_中級者への道] Js_Promiseを使ってみる
プログラミング
公開日: 2020年02月21日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] Js_Promiseを使ってみる
  • # ES6
  • # JavaScript
  • # Promise
  • # コールバック
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。