Timelines 时间线

欢迎回到GSAP的入门指南。如果你没有读过前面一篇文章，你可以先去阅读一下。

接下来，让我们接着来聊是时间线功能吧。

时间线能让我们创建非常容易调节的、很灵活的顺序动画效果。下面就是一个简单的包含着三个tween动画的timeline实例效果。默认情况下，这些动画是依次添加的，他们在变化的时候也是依次执行，而且是一个执行完之后再下一个执行。

// 创建一个Timeline类型的实例
let tl = gsap.timeline()

// 把tween动画添加到timeline实例上，注意我们在用的是tl.to 而不是gsap.to
tl.to(".green", { x: 600, duration: 2 });
tl.to(".purple", { x: 600, duration: 1 });
tl.to(".orange", { x: 600, duration: 1 });

但是，如果我们想要在动画之间加一个停顿或者说间隔改怎么办呢

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 });

有一个方式就是我们可以给某个tween动画在启动前提添加一个delay。但是这样的话，一点都不灵活。又或者，如果我们想要实现动画之间在时间上重叠，又或者几个动画同时启动，这些该怎么实现呢？

位置参数 Position Parameter

这个参数能帮我们方便的实现执行顺序和执行时间点的精确控制，我们来看下这个demo。

let tl = gsap.timeline()

// 绿色方块会在整个时间线开始1秒后进行移动
tl.to(".green", { x: 600, duration: 2 }, 1);

// 紫色方块会和之前一个添加的动画同时开始运动
tl.to(".purple", { x: 600, duration: 1 }, "<");

// 橘色方块会在之前所有动画都结束一秒后再开始运动
tl.to(".orange", { x: 600, duration: 1 }, "+=1");

我们可以使用各种写法——绝对的秒数，百分比，相对值等等方式来决定tween动画在什么时候开始。你可以试试下面这个demo。

特殊属性 Special Properties

Timelines可以设置的动画属性和tween动画绝大部分是一样的，比如像repeat和delay，可以让你轻松的设定整个顺序动画的动画属性。

时间线的默认设置 Timeline Defaults

如果你发现自己总是一遍又一遍的写同一个属性，那么你可以使用 defaults来进行设置。任何添加到时间线上的defaults的属性，都会被添加到这个时间线上的tween动画继承，像是通过to(),from()和fromTo()方式添加到时间线上的动画效果都是有这个继承效果的。利用这个方式可以让你的代码更简洁一些。

var tl = gsap.timeline({defaults: {duration: 1}});

//这样每个动画都是1秒的时长，不用重复写了
tl.to(".green", {x: 200})
  .to(".purple", {x: 200, scale: 0.2})
  .to(".orange", {x: 200, scale: 2, y: 20});

控制动画 Controlling your animations

我们之前讲的动画效果都是页面加载后就启动或者延迟一定时间启动。但是如果我们想要对动画有更多一点的控制能力的话该怎么做呢？

比较常见的就是比如说我们想要点击某个按钮或有了某个交互行为之后才会让元素进行动画效果。那么控制动画的几个方法呢可以帮我们实现这个需求，在tween和timeline上都有这些方法，play，pause，reverse或者是加速变化。

// 通过一个变量保存对Tween或者Timeline实例的引用
let tween = gsap.to("#logo", {duration: 1, x: 100});

// 暂停
tween.pause();

// 恢复（继续）
tween.resume();

// 反向变化
tween.reverse();

// 直接切换到整个动画变化时长的0.5秒的时间点的状态
tween.seek(0.5);

// 直接切换到整个变化过程的1/4的节点的状态
tween.progress(0.25);

// 让运动减速到0.5倍
tween.timeScale(0.5);

// 让变化加速到原来的2倍
tween.timeScale(2);

// 直接销毁tween实例，让垃圾回收机制可以处理该实例所占用的内存
tween.kill();

动画事件 Callbacks

如果你需要知道动画是什么启动的，或者是在动画的某个时机执行一些代码，那么你可以使用动画事件。所有的Tween和timelines都有这些事件。

onComplete：动画结束时触发

onStart：动画开始时触发

onUpdate：只要动画运行，每一帧都会触发（元素有属性变化时）

onRepeat：每次动画重复时触发

onReverseComplete：当动画反向执行后运动到变化起始点时触发

gsap.to(".class", {
  duration: 1, 
  x: 100, 
  onComplete: () => console.log("the tween is complete")
}


gsap.timeline({onComplete: tlComplete}); 

function tlComplete() {
  console.log("the tl is complete");
  // 更多代码
}