# 动态属性设置

URL: https://caijiao.org/animejs/4-advanced/1-dynamic-properties
Source: docs/animejs/4-advanced/1-dynamic-properties.md
Description: 本节介绍如何使用 Anime.js 动态设置动画属性，通过函数回调实时计算属性值，实现更加灵活和个性化的动画效果。

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

## 通过函数动态设置属性

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

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

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

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

## 示例

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

## 应用场景

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

## 小结

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

## 示例演示

[在线代码演示](/animejs/demos/7.html)