Анимация: свойство currentTime

Свойство Animation.currentTime API веб-анимаций возвращает и устанавливает текущее значение времени анимации в миллисекундах, будь то анимация запущена или приостановлена.

Если анимация не имеет timeline, неактивна или еще не была воспроизведена, значение currentTime равно null.

Число, представляющее текущее время в миллисекундах, или null для отключения анимации.

В игре «Выпей меня/Съешь меня» (Drink Me/Eat Me) высота Алисы анимируется, чтобы она могла изменяться с маленькой на большую или с большой на маленькую. В начале игры ее высота устанавливается между двумя крайними значениями путем установки currentTime анимации Алисы в половину от KeyframeEffect ее продолжительности:

aliceChange.currentTime = aliceChange.effect.timing.duration / 2;

Более общий способ перехода к 50%-й метке анимации:

animation.currentTime =
  animation.effect.getComputedTiming().delay +
  animation.effect.getComputedTiming().activeDuration / 2;

Чтобы защититься от атак на время и отслеживания, точность animation.currentTime может быть округлено в зависимости от настроек браузера. В Firefox предпочтение privacy.reduceTimerPrecision включено по умолчанию и по умолчанию равно 2 мс. Также можно включить privacy.resistFingerprinting, в этом случае точность будет 100 мс или значение privacy.resistFingerprinting.reduceTimerPrecision.microseconds, что больше.

Например, при уменьшенной точности времени результат animation.currentTime всегда будет кратен 0,002 или кратен 0,1 (или privacy.resistFingerprinting.reduceTimerPrecision.microseconds) с включенным privacy.resistFingerprinting.

// reduced time precision (2ms) in Firefox 60
animation.currentTime;
// Might be:
// 23.404
// 24.192
// 25.514
// …

// reduced time precision with `privacy.resistFingerprinting` enabled
animation.currentTime;
// Might be:
// 49.8
// 50.6
// 51.7
// …

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