javascript - Web Animations API：按需重置动画

Question

我有一个复杂的动画，它是 KeyframeEffect 组合成 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();
});