Анимация: метод updatePlaybackRate()

Метод updatePlaybackRate() интерфейса API веб-анимации's Animation устанавливает скорость анимации после первоначальной синхронизации её позиции воспроизведения.

В некоторых случаях анимация может выполняться на отдельном потоке или процессе и продолжать обновляться даже при длительных задержках JavaScript на главном потоке. В таком случае, непосредственная установка свойства playbackRate анимации может привести к скачку позиции воспроизведения анимации, так как её позиция воспроизведения на главном потоке может отличаться от текущей позиции воспроизведения.

updatePlaybackRate() — это асинхронный метод, который устанавливает скорость анимации после синхронизации с её текущей позицией воспроизведения, гарантируя, что последующее изменение скорости не вызовет резкого скачка. После вызова updatePlaybackRate() свойство playbackRate анимации не обновляется сразу. Оно будет обновлено после разрешения промиса ready анимации.

playbackRate

Новая скорость. Это может быть положительное число (для ускорения или замедления анимации), отрицательное число (для воспроизведения в обратном порядке) или ноль (для паузы анимации).

None (undefined).

Компонент выбора скорости будет выигрывать от плавного обновления updatePlaybackRate(), как показано ниже:

speedSelector.addEventListener("input", (evt) => {
  cartoon.updatePlaybackRate(parseFloat(evt.target.value));
  cartoon.ready.then(() => {
    console.log(`Playback rate set to ${cartoon.playbackRate}`);
  });
});

• API веб-анимации
• Animation.playbackRate — чтение текущей скорости воспроизведения или её установка синхронным способом.
• Animation.reverse() — инвертировать скорость воспроизведения и при необходимости перезапустить воспроизведение.
• Animation — содержит другие методы и свойства, которые можно использовать для управления анимацией веб-страницы.