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

在以下示例中，一个动画将完成，另一个动画将继续（因为“播放状态”不等于“完成”）：

const keyframes=新的KeyframeEffect（null[
{//from
不透明度：0，
},
{//to
不透明度：1，
}
]，{持续时间：2000年，轻松}）
{
const anim=新动画(
关键帧，
文件.时间表
)
动漫游戏
requestAnimationFrame（函数循环（）{
console.log（'1'，keyframes.getComputedTiming（）.progress）
如果（anim.playState！=“完成”）请求动画帧（循环）
}, 100)
}
{
const anim=新动画(
关键帧，
文件.时间表
)
动漫游戏
requestAnimationFrame（函数循环（）{
console.log（'2'，keyframes.getComputedTiming（）.progress）
如果（anim.playState！=“完成”）请求动画帧（循环）
}, 100)
}
动画效果
s，其中
关键帧效果
是子类，不能在
动画
s之间共享。这是因为它们依赖于与其
动画相关联的各种状态

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

因此，如果尝试将
动画效果
与
动画
关联，则它将从以前关联的任何
动画
中删除。这在步骤中有详细说明

顺便说一句，这就是为什么
KeyframeEffect
界面有一个

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

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

现在，至于为什么其中一个动画从未完成，这似乎是Chrome中的一个bug。在Firefox中，第一个动画（失去了它的
AnimationEffect
）在开始后几乎会立即终止，因为它变为零。
AnimationEffect
s，其中
KeyframeEffect
是一个子类，不能在
animation
s之间共享。这是因为它们依赖于与其
动画相关联的各种状态

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

因此，如果尝试将
动画效果
与
动画
关联，则它将从以前关联的任何
动画
中删除。这在步骤中有详细说明

顺便说一句，这就是为什么
KeyframeEffect
界面有一个

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

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

现在，至于为什么其中一个动画从未完成，这似乎是Chrome中的一个bug。在Firefox中，第一个动画（失去了它的
AnimationEffect
）将在开始后立即终止，因为它变为零。
啊，很好，我不知道复制构造函数。那很有用。但这（在我看来）显示了一个设计不够好的设计，因为它的工作方式允许用户以一种不起作用的自由方式传递引用。也许相反，效果引用应该在创建动画时创建（因此效果已经关联，并且无法将它们传递给另一个动画），因此是一个更耦合的API。否则，这种松散的耦合会留下错误或混乱的空间。这是一个公平的观点。这种设计的出现很大程度上是因为网络动画最初被指定包含嵌套效果，但后来被移动到了第2级。嵌套效果遵循DOM树操作模型，将节点作为另一个节点的子节点添加会将其从以前的父节点中移除。同样的行为一直应用到效果树的根。啊，不错，我不知道复制构造函数。那很有用。但这（在我看来）显示了一个设计不够好的设计，因为它的工作方式允许用户以一种不起作用的自由方式传递引用。也许相反，效果引用应该在创建动画时创建（因此效果已经关联，并且无法将它们传递给另一个动画），因此是一个更耦合的API。否则，这种松散的耦合会留下错误或混乱的空间。这是一个公平的观点。这种设计的出现很大程度上是因为网络动画最初被指定包含嵌套效果，但后来被移动到了第2级。嵌套效果遵循DOM树操作模型，将节点作为另一个节点的子节点添加会将其从以前的父节点中移除。同样的行为一直应用于效果树的根。