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

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

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

🎯 目标参数 (Target Parameters)

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

• targets
  • 作用: 指定一个或多个动画目标。
  • 类型:
    • CSS 选择器 (e.g., '.box')
    • DOM 节点 / NodeList
    • JavaScript 对象或对象数组
    • 纯文本字符串
  • 笔记: 这是唯一一个必需的参数！没有目标，不成动画。

🎨 属性参数 (Property Parameters)

定义动画要改变的属性。可以是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: 该帧结束后，进入下一帧前的延迟。

⚙️ 动画控制参数 (Animation Parameters)

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

时间控制 (Timing)

• 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 & Direction)

• loop

  • 作用: 动画循环次数。
  • 类型: boolean (true 表示无限循环) 或数字。
  • 示例: loop: 3。

• direction

  • 作用: 动画播放方向。
    • 'normal': 正常播放 (默认)。
    • 'reverse': 反向播放。
    • 'alternate': 交替播放 (循环时，一次正向，一次反向)。
  • 笔记: alternate 和 loop 是天生一对！

• autoplay

  • 作用: 是否自动播放。
  • 类型: boolean。设置为 false 后，你需要手动调用 myAnimation.play() 来启动动画。
  • 示例: autoplay: false。

🔄 回调函数 (Callbacks)

在动画生命周期的特定时刻执行你的代码，用于实现逻辑交互。

• update(animation)

  • 触发时机: 动画的每一帧都会触发。超级频繁！
  • 用途: 实时监控动画状态，如更新页面上的进度显示。

• begin(animation)

  • 触发时机: 动画开始播放时（delay 结束后）触发一次。
  • 用途: 做一些动画开始前的准备工作。

• complete(animation)

  • 触发时机: 动画全部播放完成后触发一次。
  • 用途: 动画结束后的收尾工作，或触发下一个事件。

• loopBegin(animation)

  • 触发时机: 每一次循环开始时触发 (第一次循环开始时也会触发)。

• loopComplete(animation)

  • 触发时机: 每一次循环结束时触发。

• change(animation)

  • 触发时机: (不常用) 当动画实例被 anime.remove() 移除时触发。

回调函数接收的 animation 对象 是个宝藏，里面包含了动画当前的所有状态，比如：

• animation.progress: 整体进度 (0-100)。
• animation.currentTime: 当前已播放时间。
• animation.remaining: 剩余循环次数。

以上就是 Animation 模块几乎所有的API和参数了。虽然看起来多，但它们的设计都非常直观。从 目标(targets) -> 属性(properties) -> 控制参数(parameters) 这个思路去构建，你会发现一切都井井有条。

建议收藏这篇，下次写动画时忘了哪个API，就当小字典来查吧！

#前端 #前端开发 #网页动画 #JavaScript #Animejs #Web开发 #API文档 #技术干货 #编程 #代码