动态属性设置

Anime.js 支持通过函数动态计算动画属性值，这使得动画可以根据当前元素状态、索引或其他参数灵活变化。

通过函数动态设置属性

属性值可以是函数，函数接受三个参数：

• el 当前元素
• i 当前元素的索引
• t 当前动画实例

函数应返回动画属性的最终值。

anime({
  targets: '.box',
  translateX: (el, i) => 50 + i * 30,
  rotate: (el, i) => i * 45,
  duration: 1000
});

示例

上例中，多个 .box 元素会依次向右移动且旋转角度递增，实现错落有致的动画效果。

应用场景

• 基于元素索引设置动画差异
• 动态根据元素属性计算动画值
• 结合复杂逻辑实时调整动画参数

小结

动态属性设置极大提升了动画的灵活度，配合函数回调能创造丰富多变的视觉效果。

示例演示

loading