Anime.js grid 可以在每次动画播放时随机开始吗？

Question

我想让 Anime Js 网格显示为 3x4，并且每次播放动画时从一个随机方块开始动画，他们的文档不太好涵盖这些内容，唯一的预构建模式是从中心开始
我可以通过 HTML 本身将网格显示修复为 3x4，但它可以以更好的方式完成
check the animation I want to use here from anime.js website

我的 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 用于另一个项目，并意识到如果它在配置的 delay 部分中将 from 设置为随机数乘以动画元素的总数，它就会随机开始这个问题的代码应该是这样的：

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) })
});

Anime.js grid 可以在每次动画播放时随机开始吗？

Can Anime.js grid start randomly every time the animation plays?

javascript

html

anime.js