基本参数设置

Anime.js 提供丰富的参数选项来控制动画的细节，以下是最常用的基本参数：

duration （动画持续时间）

动画执行的总时间，单位是毫秒，默认 1000。

anime({
  targets: ".box",
  translateX: 200,
  duration: 1500,
});

delay （延迟执行时间）

动画开始前的等待时间，单位毫秒。

anime({
  targets: ".box",
  translateX: 200,
  delay: 500,
});

easing （缓动函数）

控制动画的速度曲线，内置多种缓动效果，例如：

• linear 线性
• easeInQuad 加速
• easeOutBounce 弹跳等

示例：

anime({
  targets: ".box",
  translateX: 200,
  easing: "easeInOutQuad",
});

loop （循环次数）

是否循环执行动画。可以设置：

• true 无限循环
• 数字 n 表示循环 n 次

anime({
  targets: ".box",
  translateX: 200,
  loop: 3,
});

direction （播放方向）

控制动画播放方向，有：

• normal（默认）
• reverse 反向播放
• alternate 正反交替循环

anime({
  targets: ".box",
  translateX: 200,
  direction: "alternate",
  loop: true,
});

autoplay （自动播放）

是否在创建动画后自动播放，默认 true。设置为 false，需手动调用 play()。

const animation = anime({
  targets: ".box",
  translateX: 200,
  autoplay: false,
});
animation.play();

easing 函数自定义

除了字符串缓动函数，支持传入自定义函数控制进度。

小结

掌握这些基础参数，有助于灵活调整动画时机和效果，满足复杂交互需求。

示例演示

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。