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

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

---

• 若手エンジニアの中ではまだあまり知らない方がおられる
• 自分自身何気なく使っているが、まだ完全に理解して使っているわけではない
• 現在でも幅広く利用されている

requestAnimationframeとは

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

基本的な書き方

const oneSecondLog = () => console.log("1秒経過");
const testFn = num => {
 // 繰り返したい処理を書く
 console.log("実行");
 window.requestAnimationFrame(testFn); // 関数の中で呼び出す
}
setInterval("oneSecondLog()", 1000);
testFn(); // 関数を実行

具体的な使用例

キャンセル処理の例

ブラウザの対応状況

まとめ

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

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

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】