从 setTimeout 调用时动画进度不正确

Question

我正在使用网络动画 API 为 DOM 元素设置动画。我想在1秒后显示动画进度

这是我试过的。

const animation = div.animate({
  opacity: 0
}, {
  duration: 2000
});
setTimeout(() => console.log(animation.effect.getComputedTiming().progress), 1000);

我希望显示0.5，因为动画进行到一半时会调用setTimeout 函数。问题是打印了 0.0083

Answer 1

使用 animate()（或 CSS animations/transitions 生成的动画不会立即开始。

相反，浏览器首先执行必要的设置工作，例如将内容拆分为合适的层，渲染这些层，将层和动画信息传递给合成器 thread/process 然后开始动画（和解析 Animation 对象的 ready 承诺 animate() returns).

因为此设置成本通常是 non-zero（尤其是在 lower-end 设备上），如果浏览器不这样做，动画将在启动时跳转因为当浏览器最终开始显示动画时，动画的当前时间已经过了 0 毫秒。例如如果浏览器用 100 毫秒来设置动画，前六帧会被丢弃，动画会跳转。

（就其价值而言，will-change 背后的动机之一是允许作者预先支付此设置费用，以便动画可以更快地启动。）

所有浏览器都执行此优化，但精确时间因浏览器而异，设置成本因设备和平台而异。提供了 Animation.ready 承诺，因此无论 browser/platform/device.

是什么，您都可以等到动画真正开始

您可以强制动画立即开始，但是，通过直接设置 startTime。例如，

const animation = elem.animate(...);
animation.startTime = document.timeline.currentTime;

但是，这可能会导致动画的前几帧丢失，尤其是在 lower-end 设备上。

从 setTimeout 调用时动画进度不正确

Incorrect animation progress when calling from setTimeout

javascript

google-chrome

web-animations