# 循环与方向

URL: https://caijiao.org/animejs/4-advanced/2-loop-direction
Source: docs/animejs/4-advanced/2-loop-direction.md
Description: 本节介绍 Anime.js 中动画的循环控制和播放方向设置，包括无限循环、指定次数循环，以及正向、反向和交替播放等功能。

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

## 循环（loop）

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

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

## 播放方向（direction）

可设置动画播放方向：

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

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

## 结合使用

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

## 小结

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

## 示例演示

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