时间线

时间线可以理解为多个动画的集合，它可以自动根据每个动画的执行时长来调整后面动画的开始时间。

基础用法

可以通过 gsap.timeline() 创建一个时间线，然后通过时间线控制每一个动画顺序执行；这样即使我们修改中间某个动画的 duration，也不会影响后续时间线。

const tl = gsap.timeline();

tl
  .to("#green", { x: width, xPercent: -100, duration: 2 })
  .to("#purple", { x: width, xPercent: -100, duration: 1 })
  .to("#orange", { x: width,  xPercent: -100, duration: 1 })

See the Pen by GreenSock on CodePen.

---

同时也支持在时间线上添加延迟(delay)。

let tl = gsap.timeline()

tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1, delay: 1 });
tl.to(".orange", { x: 600, duration: 1 });

See the Pen by GreenSock on CodePen.

默认参数

时间线支持传入一个对象作为参数，用来设置默认的动画参数，默认参数会应用到时间线上的所有动画上。

let tl = gsap.timeline({
  defaults: {
    duration: 1,
    ease: "power1.inOut",
  },
});

tl.to(".green", { x: 600 })
  .to(".purple", { x: 600 }, "<")
  .to(".orange", { x: 600 }, ">");

位置参数

gsap.timeline() 创建的时间线，默认会将动画插入到时间线的末尾。如果想在特定的位置插入动画，可以在第三个参数传入一个位置参数。

let tl = gsap.timeline()

// 将时间线精确地定位到1秒的位置
tl.to(".green", { x: 600, duration: 2 }, 1);
// 在上一个动画的开始处插入
tl.to(".purple", { x: 600, duration: 1 }, "<");
// 在上一个动画的结束1秒插入
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

See the Pen by GreenSock on CodePen.

---

时间线支持多种位置参数，例如：

• 1: 表示在当前时间线的第 1 秒处插入；
• <: 表示在上个动画的开始处插入；
• >: 表示在上个动画的结束处插入；
• +=1: 表示在最后一个动画结束后延迟一秒再执行；
• -=1: 表示在最后一个动画结束前一秒执行；
• +=50%: 表示在最后一个动画结束后延迟一半时间再执行；
• -=50%: 表示在最后一个动画结束前一半时间执行。

See the Pen by GreenSock on CodePen.