每次动画播放时，animation .js网格可以随机启动吗?

Question

我想让Anime Js网格显示为3x4，动画每次播放时都从随机正方形开始，他们的文档不是那么好，无法覆盖这些东西，唯一的预构建模式是从中心开始
我可以通过HTML本身修复网格显示为3x4，但它可以以更好的方式完成
检查我想在这里使用的动画从animation .js网站

我的HTML是这样的:

<div class="animation">
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
<div class="small square el"></div>
</div>

我的javascript是这样的:

anime({
targets: '.animation .el',
scale: [
{ value: 0.1, easing: 'easeOutSine', duration: 500 },
{ value: 1, easing: 'easeInOutQuad', duration: 1200 }
],
loop: true,
delay: anime.stagger(200, { grid: [3, 4], from: 'center' })
});

Answer 1

我在另一个项目中使用动漫js，并意识到如果它将from设置为delay部分配置中的随机数乘以动画元素的总数，那么它就会随机启动这个问题的代码应该是这样的:

anime({
targets: '.animation .el',
scale: [
{ value: 0.1, easing: 'easeOutSine', duration: 500 },
{ value: 1, easing: 'easeInOutQuad', duration: 1200 }
],
loop: true,
delay: anime.stagger(200, { grid: [3, 4], from: anime.random(0, 12) })
});