循环与方向

Anime.js 支持灵活的循环和动画方向设置，让动画表现更加丰富多变。

循环（loop）

• loop: true 表示无限循环
• loop: n 表示循环 n 次
• 默认不循环

anime({
  targets: '.box',
  translateX: 200,
  loop: 3,
  duration: 1000
});

播放方向（direction）

可设置动画播放方向：

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

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

结合使用

循环与方向常结合使用，实现持续的往返动画效果。

小结

灵活运用循环和方向参数，能显著增强动画的表现力和交互感。

示例演示

loading