如果你阅读过上一篇《初探GSAP》文章，我想你对GSAP有了一个初步的认识。而且文章中也提到过，使用gsap.timeline()这个API可以帮助我们轻易的控制动画的时序。换句话说，让我们控制动画变得更简单，效果更好。今天这篇文章，我想花更多的时间和大家一起来探讨GSAP中的Timeline，即 gsap.timeline()的使用。

什么是时序

“时序”是“Sequencing with Timelines”的中文意思，简单地说就是顺序和时间，我喜欢把它称为时序。换句话说，就是通过时间线来控制顺序。在Web动效中，这是非常普遍的一种现象。比如说：

• 一个动画对象，有多个动画效果，每个效果都会由一个时间管理器来控制出现的先后顺序，这就是“时序”
• 另一种是多个动画对象具有同一个动画效果，每个动画对象播放该动画效果也会由一个时间管理器来控制动画对象播放动效的先后顺序，这也是“时序”

在Web动画中这种“时序”（顺序和时间）往往是最为复杂的。

回到我们熟悉的动画开发中来，比如说CSS Animations 和 Transitions，控制动画时序主要依赖的是动画的持续时间（Duration Timeline）和 延迟时间（Delay Timeline）。对应的话就是：animation-duration、animation-delay、transition-duration和transition-delay。如果你对Web Animation API有过一定接触的话，控制时序有两个相应的API，即 duration 和 delay。

就拿CSS Animations为例：

上图向我们展示了前面所说的两种不同的时序情景。

不过我们在制作Web动画的时候，场景会比这个复杂的多。如果仅仅依赖于duration和delay来控制动画时序，那么会非常的困难，而且在特定的环境之下还会让整个动效效果错乱。面对这样的一个场景，我们就需要一个更好的时间管理器，即 Timeline。帮助我们更好的管理动画中的时序。

什么是Timeline?

Timeline常被称为时间轴，它也是个容器。就是用来控制时间的，我们可以让时间之间有间隙、也可以让时间之间重叠。每个时间轴都有一个起始位置（也称为播放头）和一个终点位置（也称为停止点）。

在动画制作的世界中，时间轴主要是用来控制动画对象对应的动画效果的播放时间和持续时间。也就是说，在制作动画的时候，一旦你掌握了时间轴，一个全新的充满可能性的世界就会被你打开。那是因为，时间轴提供了一种绝妙的方法来模块化你的动画代码。

在CSS Animations 和 Transitions以及不太熟知的Web Animation API世界中，如果不使用第三方面时间轴插件（或动画库）的话，时间轴的功能有着很大的极限性。但在GSAP的世界中，时间轴就非常的强大，除了GSAP自带的时间轴API（即gsap.timeline()）之外，还有 TimelineLite()、TimelineMax()、 TweenLite 和 TweenMax。

今天我们主要和大家一起探讨是gsap.timeline()，对于TimelineLite()、TimelineMax()、TweenLite和TweenMax将会放到后面的章节中和大家一起讨论。

何时使用Timeline?

前面说过了，Timeline是用来管理动画或动画对象的。好比一个人在一个时间范围内做了不同的动作，什么时候走？什么时候跳？什么时候蹲下等等。如果运用到Web动效果的开发中，当你具备下面的任一条件时，都可以使用时间轴来管理：

• 需要控制一组动画
• 为了构建一个序列而不干扰大量的延迟值
• 模块化你的动画代码
• 做任何复杂的动画场景
• 要根据一组动画触发回调（比如在某个动画结束时高用myFunction()）

如果你只是在某个地方或某个时间做一个动画（或让一个元素动起来），那么使用Timeline就有点大才小用了。

如何使用gsap.timeline()

在这篇文章中，我们主要讨论的是GSAP中自带的Timeline的API的使用，即 gsap.timeline()。

声明一个Timeline

在GSAP中，我们可以像下面这样来声明一个Timeline：

const tl = gsap.timeline()

如果声明的Timeline带有一定的默认值的话，可以像下面这样声明：

const tl2 = gsap.timeline({
    repeat: -1,
    defaults: {
        duration: 1.5
    }
})

如果你在控制台上把tl和tl2打印出来，结果如下图所示：

这样一来，我们就可以在已声明的Timeline上调用一些GSAP的API。比如tl.to()，甚至可以不断的链式调用，比如tl.to().to()...。也可以像tl.play()、tl.pause()这样使用。

gsap.timeline()的基本运用

为了能更好的理解gsap.timeline()的使用，我们还是从最基础的地方开始。暂时回到前一篇文章《初探GSAP》中来，使用gsap.to()创建动画效果：

gsap.to('.ball', {
    duration: 1.5,
    x: 200,
    scale: 2
})

gsap.to('.ball', {
    duration: 1.5,
    delay: 1.5,
    x: 0,
    scale: 1
})

效果如下：

点击示例中的“Play”按钮，你将看到效果像下图这样：

你可能已经注意到了，上面的示例是一个链式动画。动画对象.ball先向右移动200px，并且放大2倍，这个动画效果持续的时间是1.5s，接着动画对象.ball在1.5s之后，再向左移动到初始位置，并且缩小到原始大小。为了让第二个动画效果能在第一个动画效果结束时播放，我们在第二个gsap.to()中设置了delay的值为1.5s，也就是第一个gsap.to()中的duration值。对于这样一个简单地链式动画效果，这样做是可行的，但它也是很脆弱的。如果第一个动画的duration改变了，为了让第二个动效也在第一个动效结束时播放，就必须调整第二个动效的delay。另外， 如果我们在第二个动画效果之后还有第三