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();
});

Web Animations API：按需重置动画

1 个答案: