requestAnimationFrame()について

requestAnimationFrame()は、次の画面更新の前にコールバック関数を実行してアニメーションを更新します。

Demo Animation

---

---

Please reload.

Description

2000ms間、200px、x軸方向に移動します。

requestAnimationFrame()を使用して動作させています。

Code

html

<div id="move-item">●</div>

JavaScript

let animation_f = () => {
    const element = document.getElementById("move-item");
    let start; // undefined
    let cnt = 0; // countしてみよう
            
    // timestamp ...ページの経過時間のようだ
    function step(timestamp) {
        cnt++;
        // 最初の時間を保存
        if (start === undefined) {
            start = timestamp;
            console.log("start: " + start);
        }

        // elapsed(ぁ(ぃ)らぷす) ...経過
        const elapsed = timestamp - start;
            
        // Math.min() を使用して、要素がちょうど 200px で止まるようにしている。
        // Math.min ...小さい方を返す
        // count ...x座標の移動距離 / 0.1を乗算しないと2000px移動になる
        const count = Math.min(0.1 * elapsed, 200);
        element.style.transform = `translateX(${count}px)`;

        if (count === 200) {
            console.log("done: " + timestamp);
            console.log("elapsed: " + elapsed);
            console.log("cnt: " + cnt);
        } else {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
};

requestAnimationFrame()

requestAnimationFrame(callback_function)

requestAnimationFrame()は、次の再描画の前に、引数に指定した関数を実行し、アニメーションの更新を要求します。

callbackされる関数には引数が1つあり、それはページの経過時間です。

終了条件になるまで、自らrequestAnimationFrame()をcallします。

補足

更新タイミングはディスプレイのリフレッシュレートに寄ります。

60Hzの場合は60回callされました。30Hzに落とすと30回のcallでした。

60Hz以上のモニタの動作テストはしていません。

ブラウザに負荷を掛けると更新回数は下がりました。

まとめ

次の画面更新タイミングで関数を呼ぶ

だいたい60Hzレートで更新する

Reference

Window.requestAnimationFrame() mdn

DOMHighResTimeStamp mdn

参考記事

CSSアニメーションの説明

transitionの説明