基于函数的值
通过使用 Function 作为值，为多目标动画的每个目标设置不同的值。
基于函数的的值可以使用 animation.refresh() 方法重新计算，而无需创建新的动画。
接受
一个带有以下参数的 Function
animate(targets, {
x: (target, index, length) => target.dataset.value * (length - index),
});参数
| 名称 | 描述 |
|---|---|
| target | 当前动画目标元素 |
| index | 当前目标元素的索引 |
| length | 动画的目标总数 |
必须返回
基于函数的值 代码示例
import { animate } from 'animejs';
animate('.square', {
x: $el => /** @type {HTMLElement} */($el).getAttribute('data-x'),
y: (_, i) => 50 + (-50 * i),
scale: (_, i, l) => (l - i) * .75,
rotate: () => utils.random(-360, 360),
borderRadius: () => `+=${utils.random(0, 8)}`,
duration: () => utils.random(1200, 1800),
delay: () => utils.random(0, 400),
ease: 'outElastic(1, .5)',
});<div class="medium row">
<div class="square" data-x="170"></div>
</div>
<div class="medium row">
<div class="square" data-x="80"></div>
</div>
<div class="medium row">
<div class="square" data-x="270"></div>
</div>