在以下示例中,一个动画将完成,而另一个将继续播放(因为 playState 不等于已完成):
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)
}
为什么一部动画永远不会“完成”?