如何在 Web Animation API 中反转无限动画？

Question

在Web Animation API中，我们可以通过Element.animate接口对元素进行动画处理。返回的Animation对象可以通过 、和进行播放、暂停或.play()反转。.pause().reverse()let img = document.querySelector('#happy-boy');const boy_animation = [    { transform: 'rotate(0)' },    { transform: 'rotate(360deg)' },];const boy_timing = {    duration: 3000,    iterations: Infinity,}let animation = img.animate(boy_animation, boy_timing);animation.reverse(); // <-- fails with DOM exception当我尝试反转（）动画时出现此错误：Cannot play reversed Animation with infinite target effect end.

Answer 1

的行为reverse()，如play()，是如果动画处于“结束”，它会跳回到开头并开始播放。

这reverse()意味着如果您调用它时当前时间为零（如您的示例中所示），那么它应该跳回到开头。然而，如果你的动画有无限长度，那就意味着跳到无限！

如果您只想向后运行动画的关键帧，则可以使用该direction属性。

例如：

animation.effect.updateTiming({ direction: 'reverse' });

但请注意，与 不同的是reverse()，在动画进行过程中更新方向可能会导致动画跳转位置。

如果您希望能够在动画进行过程中前后更改动画方向并使其永远重复，您可以：

1. 设置一个非常长的迭代计数并在该范围的中间开始动画，或者

2. 使用updateTiming({ direction: 'reverse' })并调整currentTime使其不会跳跃。像下面这样的东西可能会起作用：

    const ct = animation.effect.getComputedTiming();
    animation.currentTime =
        ct.currentInteration * ct.duration +
        (ct.duration - ct.localTime % ct.duration);

updateTiming进一步注意，如果动画异步运行（例如大多数变换和不透明动画），即使使用 (2) 中的 as 也可能导致动画稍微跳跃，因为 Javascript 运行的主线程上的计时之间可能存在一些小延迟以及运行动画的线程/进程。

使用(1)（或）reverse()中的 as可以避免该问题，因为它会在更新任何异步动画之前对其进行同步。updatePlaybackRate()