基于函数的值

通过使用 Function 作为值，为多目标动画的每个目标设置不同的值。

基于函数的值可以通过 animation.refresh() 方法重新计算，而无需创建新的动画。

接受

一个带有以下参数的 Function

animate(targets, {
  x: (target, index, targets) => target.dataset.value * (targets.length - index),
});

参数

名称	描述
目标	当前动画的目标元素
索引	当前目标元素的索引
targets	动画的所有目标元素的 `Array`（数组）
prevTween	前一个兄弟补间动画对于相同目标和属性的计算结束值

从 4.4.0 版本开始，基于函数的值回调的第三个参数已从 total (Number) 更改为 targets (Array)。如需迁移，请将 total 替换为 targets.length。

必须返回

基于函数的值代码示例

import { animate, utils } from 'animejs';

animate('.square', {
  x: $el => /** @type {HTMLElement} */($el).getAttribute('data-x'),
  y: (_, i) => 50 + (-50 * i),
  scale: (_, i, t) => (t.length - 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>