Web Animations API:按需重置动画

Question

我有一个复杂的动画，它是组合了GroupEffect和SequenceEffect的关键帧效果。在一个非常简化的版本中，它看起来就像这个JSBin https://jsbin.com/denucaq/edit?html,js,output中所呈现的那样

问题是，我必须在某个时刻重置动画所做的所有更改，以便可能重新运行动画或执行其他操作。

我不能使用fill: 'none'，因为不同的元素有不同的动画持续时间，它们都必须留在它的最终位置，直到所有的元素都被动画。

所以问题是我应该在crazyWords.reset函数体中写什么？

Answer 1

这将需要一些数学知识，但您可以从方法本身获得所需的所有信息。尝试将其放入重置函数中，然后在不同的时间单击它：

console.log(document.timeline);

您可以访问oncancel方法，因此可以使用它来恢复基于开始时间和当前时间的更改，依此类推(这里发生了数学运算)。我还发现了一个非常好用的反向方法：

const allAnimations = document.timeline.getAnimations();
allAnimations.forEach((ani) => {
  ani.pause();
  console.log(ani.playState);
  ani.reverse();
});