Animation: currentTime 属性

Baseline 已广泛支持

此功能已经成熟，并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各浏览器中推出。

Web Animations API 的 Animation.currentTime 属性用于获取和设置动画的当前时间值（以毫秒为单位），无论动画正在运行还是已暂停。

如果动画缺少 timeline，处于非活动状态，或者尚未播放过，则 currentTime 的返回值将是 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 首选项默认启用，并将精度限制为 2ms。你也可以启用 privacy.resistFingerprinting，在这种情况下，精度将是 100ms 或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值（以较大者为准）。

例如，在降低时间精度的情况下，animation.currentTime 的结果将始终是 0.002 的倍数，或者在使用 privacy.resistFingerprinting 启用时是 0.1（或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds）的倍数。

// 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
// …