动漫摇摇晃晃出了顺序？

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个硬币就会弹出...我知道你可能需要一些更多的代码，但这部分680锁客户端代码（全部由我编写），我不想把它全部放在这里…

提前谢谢！

Answer 1

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

添加值以增加动画中的500ms延迟。stagger(500,{easing：“ease outelastic”}）

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

null

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