画面描画専用の setTimeout のような関数で、こいつに関数を与えると、ブラウザが画面描画のスムーズになるタイミングを自動判定して関数をキックしてくれる。なので逆に描画間隔は指定できない。

Window.requestAnimationFrame() - Web API | MDN

キックされた関数内でまた requestAnimationFrame を呼ぶことで連続的にアニメーションさせるという使い方をする。

var timestamp = null
function hogeDraw(_timestamp){
    // 初期処理
    if(!timestamp){
        timestamp = _timestamp;
    }
    // 何かをちょっとずつ動かす処理
 
    if(/* アニメーションの完了判定 */){
        // 完了なら終わり
        return;
    }else{
        // 未完了なら自身の中で自身を呼び出して次のサイクルにつなげる
        window.requestAnimationFrame(hogeDraw);
    }
}
// 最初の一発
window.requestAnimationFrame(hogeDraw);

コールバックの際にその実行時刻を教えてくれるのでこれにより動作時間が関係する処理を書くことができる。

これの場合は this の関係で普通に使うと動かない。

window.requestAnimationFrame(this.hogeDraw);

アロー関数を使って this をクロージャで固定すると使える。 この際にコールバックから戻ってくる timestamp を受け取るのを忘れないようにする

window.requestAnimationFrame((_t)=>{
    this.hogeDraw(_t)
});

</code>