每次动画播放时Anime.js网格可以随机启动吗？答案

【问题标题】：Can Anime.js grid start randomly every time the animation plays?每次动画播放时Anime.js网格可以随机启动吗？
【发布时间】：2021-03-02 17:55:05
【问题描述】：

我想让 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' })
});

【问题讨论】：

标签： javascript html anime.js

【解决方案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) })
});

【讨论】：