为什么与两个动画共享一个关键帧效果会导致一个动画永远不会结束？

Question

在下面的例子中，一个动画会完成，另一个会继续播放（因为playState不等于finished）：

const keyframes = new KeyframeEffect(null, [
    { // from
        opacity: 0,
    },
    { // to
        opacity: 1,
    }
], {duration: 2000, easing: 'ease'})

{
    const anim = new Animation(
        keyframes,
        document.timeline
    )

    anim.play()

    requestAnimationFrame(function loop() {
      console.log('1', keyframes.getComputedTiming().progress)
      if (anim.playState != 'finished') requestAnimationFrame(loop)
    }, 100)
}


{
    const anim = new Animation(
        keyframes,
        document.timeline
    )

    anim.play()

    requestAnimationFrame(function loop() {
      console.log('2', keyframes.getComputedTiming().progress)
      if (anim.playState != 'finished') requestAnimationFrame(loop)
    }, 100)
}

为什么一个动画永远不会“完成”？

Answer 1

AnimationEffects，其中KeyframeEffect是一个子类，不能在Animations之间共享。这是因为他们依赖于与他们的Animation 关联的各种状态。

（特别是，他们需要知道它们是否与过渡/CSS 动画相关联以便正确堆叠，并且他们需要知道其动画的播放速率以便在其活动间隔结束时产生正确的值。 )

因此，如果您尝试将 AnimationEffect 与 Animation 相关联，则它会从之前与之关联的任何 Animation 中删除。这是在set the associated effect of an animation 的过程中指定的。

顺便说一句，这就是为什么KeyframeEffect 接口有一个"copy constructor" 以便您可以克隆KeyframeEffects。

因此，在您的示例中，您可以使用以下方法解决此问题：

const anim = new Animation(
  new KeyframeEffect(keyframes),
  document.timeline
)

现在，至于为什么其中一个动画永远不会完成，这似乎是 Chrome 中的一个错误。在 Firefox 中，第一个动画（丢失了 AnimationEffect）将在开始后几乎立即终止，因为它的 associated effect end 变为零。