动漫错位了吗？

Question

这是我在一个在线连接4游戏末尾的动画中使用的：

for(let i = 0; i < 4; i ++){
                    var circle = document.getElementById(winAnimDivIDs[i]);
                    circle.classList.add("finishAnim");
                }
                anime({
                    targets: '.finishAnim',
                    scale: [
                        {value: 1.2, duration: 400},
                        {value: 1, duration: 500}
                    ],
                    delay: anime.stagger(500, {easing: 'easeOutElastic'}),
                    loop: true
                });
            }

动画的顺序是什么，以及如何定义它？因为如果我这样放它，最左边的硬币首先得到动画，然后有一个延迟，然后所有其他3个硬币将弹出…我知道你可能需要更多的代码，但是680LOC客户端代码的这一部分(都是我写的)，我不想把它们都放在这里。

提前谢谢你！

Answer 1

您需要在每个循环中增加延迟值。目前，循环将完成，它们都将收到相同的延迟值，这就是为什么它们都在同一时间动画。

为您在anime.stagger(500, {easing: 'easeOutElastic'})中的500ms延迟增加价值

演示一个简单示例的代码片段：

​

const delay = 100;
for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.info(`yo, ${i}`);
  }, delay * i);
}

​