# 控制时间轴顺序与嵌套

URL: https://caijiao.org/animejs/3-timeline/2-control
Source: docs/animejs/3-timeline/2-control.md
Description: 本节讲解如何灵活控制 Anime.js 时间轴中动画的执行顺序和实现时间轴嵌套，提升动画的复杂度和表现力。

Anime.js 的时间轴功能非常强大，除了基本的顺序执行，还支持复杂的时间控制与嵌套，方便你打造多层次的动画效果。

## 顺序控制

使用时间轴的 `add()` 方法时，可以通过第二个参数控制动画的开始时间：

- **相对时间**：例如 `'-=500'` 表示提前 500ms 开始
- **绝对时间**：指定精确的开始时间（毫秒）

```js
const tl = anime.timeline({
  easing: "easeOutQuad",
  duration: 800,
});

tl.add({ targets: ".box1", translateX: 250 })
  .add({ targets: ".box2", translateY: 50 }, "-=400") // 与前一个动画重叠400ms
  .add({ targets: ".box3", opacity: 0.5 }, 1000); // 绝对时间1秒后开始
```

## 嵌套时间轴

时间轴可以嵌套，允许将一个时间轴作为另一个时间轴的动画目标，实现更复杂的动画管理：

```js
const childTl = anime.timeline();
childTl.add({ targets: ".box2", rotate: "1turn" });

const parentTl = anime.timeline();
parentTl.add({ targets: ".box1", translateX: 200 }).add(childTl, "-=300"); // 嵌套子时间轴
```

## 小结

通过灵活的时间参数和嵌套机制，可以精确控制动画的顺序与层级，打造高质量交互动画。

## 示例演示

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