DOM

：

：

Animation.updatePlaybackRate() メソッド

　編集：2022.10.22 by T.A.

[Edge]。→、、

Web アニメーション Animation の、最初に再生位置を同期した後でアニメーションの速度倍率を設定します。

mdn： 最初に再生位置を同期した後で、アニメーションの速度を設定します。

mdn： ある場合には、アニメーションは別のスレッドまたはプロセスで実行される場合があり、実行時間の長い JavaScript がメイン スレッドを遅延させている間でも更新を続けます。このような場合、アニメーションに直接 playbackRate を設定すると、メイン スレッドでの再生位置が現在実行中の再生位置からずれている可能性があるため、アニメーションの再生位置がジャンプする可能性があります。

mdn： updatePlaybackRate() は、現在の再生位置と同期した後にアニメーションの速度を設定する非同期メソッドです。結果として生じる速度の変化が急激なジャンプを引き起こさないようにします。updatePlaybackRate() を呼び出した後、アニメーションの playbackRate はすぐには更新されません。アニメーションの ready プロミスが解決されると更新されます。

構文
Animation.updatePlaybackRate(playbackRate)
Animation Animation
playbackRate 新しい速度倍率を表す正負の数値。負の値は逆方向の再生を意味します。0 は動きが止まっている状態になります。
戻り値

なし（undefined）。

例
再生と再生速度指定→playbackRate

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdSaisei>再生</BUTTON>
<BUTTON id=IdItijiteisi>一時停止</BUTTON><BR>
速度：<INPUT id=IdRate type=range min=-2 max=2 step=0.25 value=1><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //キーフレーム効果の指定：
  IdTest,  //ターゲット要素。
  [  //キーフレーム。
    {transform:'translateX(0)'}, {transform:'translateX(500px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //5000ms掛けて、？。
);
Ani=new Animation(KE, document.timeline);  //アニメーション生成。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  Ani.pause();       //アニメーション一時停止。
}
function JobRate(){  //「速度」が変更された時の処理：
  D=IdRate.value;    //速度指示を得る（文字列）。
//  Ani.playbackRate=Number(D);  //速度設定。
  Ani.updatePlaybackRate(Number(D));  //速度設定。
}
IdSaisei.onclick=JobPlay;      //ボタンにイベント割り当て。
IdItijiteisi.onclick=JobPause; //ボタンにイベント割り当て。
IdRate.oninput=JobRate;        //速度指定変更のイベント割り当て。

function Job(){  //タイマー監視の処理：
  IdLog.innerHTML="playbackRate："+Ani.playbackRate;  //表示。
}
setInterval(Job, 300);  //0.3秒毎のタイマー監視割り当て。

playbackRate の設定の場合と変わりないようですが。

→addEventListener()。

→animate()。commitStyles()。remove イベント。replaceState、reverse()、currentTime。

→CSS：transform。CSS：translate。

テスト