0

在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

当我尝试 reverse() 动画时出现此错误：

Cannot play reversed Animation with infinite target effect end.

Linux 上的 chrome 86

4

1 回答 1

2

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 的主线程上的计时之间可能会有一些小的延迟以及运行动画的线程/进程。

使用reverse()as (1) (or updatePlaybackRate()) 可以避免这个问题，因为它会在更新之前同步任何异步动画。

于 2020-11-09T00:06:09.690 回答