控制时间轴顺序与嵌套

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'); // 嵌套子时间轴

小结

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

示例演示

loading