✨ Anime.js Animation 天书，参数终极详解 ✨

最新推荐文章于 2025-11-14 01:49:07 发布

原创最新推荐文章于 2025-11-14 01:49:07 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

55 篇文章

订阅专栏

准备好深入 Anime.js 的核心了吗？我们来一次性拆解 anime() 函数中所有可用的API参数。这篇就是你的字典，忘了哪个参数是干嘛的，随时回来查！

anime() 函数通过一个配置对象（Configuration Object）来工作，我们所有的“魔法”都写在这个对象里。

这是动画的起点，告诉Anime.js你要对谁施法。

定义动画要改变的属性。可以是CSS属性、Transforms、SVG属性，或者JS对象属性。

常规属性 (e.g., opacity, backgroundColor, width)
- 作用: 直接指定你想改变的属性名和它的最终值。
- 示例: opacity: 0.5, width: '100%'
函数式属性
- 作用: 通过一个函数动态计算属性值，可以为每个目标元素生成不同的动画效果。
- 函数接收参数: function(element, index, total)
  - element: 当前目标元素。
  - index: 当前元素在目标数组中的索引。
  - total: 目标元素的总数。
- 示例: translateX: (el, i) => i * 20 (每个元素比前一个多移动20px)。
关键帧 (Keyframes)
- 作用: 让一个属性经历多个阶段的变化，而不是简单的“从A到B”。
- 语法: 将属性值定义为一个对象数组。JavaScript
```
translateX: [
  { value: 250, duration: 800 },
  { value: 0, duration: 1000, delay: 500 }
]
```
- 关键帧内的专属参数:
  - value: 该帧的目标值。
  - duration: 到达该帧所需的时间。
  - delay: 到达该帧前的延迟。
  - easing: 到达该帧使用的缓动函数。
  - endDelay: 该帧结束后，进入下一帧前的延迟。

这些参数是动画的“总开关”，控制着整个动画的播放行为和质感。

duration
- 作用: 动画总时长（毫秒）。
- 示例: duration: 2000 (动画持续2秒)。
delay
- 作用: 动画开始前的延迟时间（毫orso）。
- 函数式: delay: anime.stagger(100) (创建酷炫的交错延迟效果)。
endDelay
- 作用: 动画结束后，在循环下一次或彻底完成前的延迟时间。
- 示例: endDelay: 500。
easing
- 作用: 缓动函数，决定动画的速度曲线。
- 类型: 字符串 (e.g., 'easeInOutSine') 或自定义贝塞尔曲线 cubicBezier(x1, y1, x2, y2)。
- 笔记: 这是赋予动画“生命感”的关键！
round
- 作用: 对动画过程中变化的数值进行四舍五入。
- 类型: boolean (true/false) 或数字（保留的小数位数）。
- 示例: round: 1 (保留一位小数)。

loop
- 作用: 动画循环次数。
- 类型: boolean (true 表示无限循环) 或数字。
- 示例: loop: 3。
direction
- 作用: 动画播放方向。
  - 'normal': 正常播放 (默认)。
  - 'reverse': 反向播放。
  - 'alternate': 交替播放 (循环时，一次正向，一次反向)。
- 笔记: alternate 和 loop 是天生一对！
autoplay
- 作用: 是否自动播放。
- 类型: boolean。设置为 false 后，你需要手动调用 myAnimation.play() 来启动动画。
- 示例: autoplay: false。