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
実務未経験から入社半年間で取り組んだこと
その他
テクノロジー
公開日: 2021年09月03日
最終更新日: 2021年09月03日
実務未経験から入社半年間で取り組んだこと
siwauchi

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
制作者への影響を探る!Gutenberg (グーテンベルグ) – WordPress 5.0 搭載予定の新エディタ
テクノロジー
プログラミング
公開日: 2017年11月29日
最終更新日: 2017年11月29日
制作者への影響を探る!Gutenberg (グーテンベルグ) – WordPress 5.0 搭載予定の新エディタ
オンスタ運営

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
やさしいGoogle Meetの参加方法
アプリケーション
テクノロジー
公開日: 2020年11月04日
最終更新日: 2020年11月04日
やさしいGoogle Meetの参加方法
s.tsujiyama

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
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
プログラミング
マークアップ
公開日: 2020年01月16日
最終更新日: 2022年01月17日
【Vue.js】初心者のワタシがつまづいた。Sassの共通変数をグローバルに読み込む方法
  • # Sass
  • # vue-cli
  • # Vue.js
  • # vuejs
オンスタ運営

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
初心者でも簡単に作れる!ホームページを簡単に作る方法をご紹介
システム
テクノロジー
公開日: 2019年07月25日
最終更新日: 2019年07月25日
初心者でも簡単に作れる!ホームページを簡単に作る方法をご紹介
  • # ホームページ
  • # 方法
  • # 簡単
オンスタ運営

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業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
オンライン学習
プログラミング
公開日: 2019年06月25日
最終更新日: 2022年01月17日
Web業界で欠かせないスキル!HTML5プロフェッショナル認定資格とは?
  • # HTML5プロフェッショナル認定資格
オンスタ運営

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
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
WordPress
システム
テクノロジー
デザイン
公開日: 2020年06月29日
最終更新日: 2022年01月17日
【.htaccess】WordPressでも馴染みの深い.htaccess。その概要とよく使うTips5選
  • # .htaccess
オンスタ運営

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のWeb API(getBoundingClientRect)の活用例を紹介
プログラミング
公開日: 2021年10月15日
最終更新日: 2021年10月15日
JSのWeb API(getBoundingClientRect)の活用例を紹介
m.watanabe

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
現場で働いているからわかる!人気プログラミング言語を徹底比較
プログラミング
公開日: 2019年07月10日
最終更新日: 2019年07月10日
現場で働いているからわかる!人気プログラミング言語を徹底比較
  • # プログラミング言語
  • # 比較
オンスタ運営
全記事一覧

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

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

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

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