Question

TimelineLite / TimelineMax 是 GreenSock 动画平台中的动画组织、排序、管理工具，可创建时间轴（timeline）作为动画或其他时间轴的容器，这使得整个动画控制和精确管理时间变得简单。
试想一下，如果不使用 TimelineLite/TimelineMax 创建时间轴，那么构建复杂的动画序列将会非常麻烦，因为你需要用 delay 为每个动画设置开始时间。以下是没有使用时间轴的动画序列的基本示例：

TweenLite.to(element, 1, {left:100});
TweenLite.to(element, 1, {top:50, delay:1});//延迟 1 秒，接续前一个动画
TweenLite.to(element, 1, {opacity:0, delay:2});//延迟 2 秒，接续前一个动画

上面的代码将元素的 left 属性设置为 100，然后将 top ​ 设置为 50，最后将 透明度 设置为 0（注意 delay 除第一个以外的所有其他动画都用上了）。但想象一下，如果你想将第一个动画的持续时间增加到 1.5，那么你需要调整其后的每一个延迟。
如果你想要 pause() 整个动画序列或者 restart() 它，或者 reverse() 它在运行中或跳到整个动画中的特定点，这变得相当混乱（或不可能），但 TimelineMax 使其非常简单：

var tl = new TimelineLite();
tl.add( TweenLite.to(element, 1, {left:100}) );//将一个动画添加到时间轴
tl.add( TweenLite.to(element, 1, {top:50}) );//将一个动画添加到时间轴末端，即与前一个动画接续
tl.add( TweenLite.to(element, 1, {opacity:0}) ); //将一个动画添加到时间轴末端，即与前一个动画接续
 
//控制时间轴
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
...

或者使用简单的 to() 方法和链式调用使其更加简洁：

var tl = new TimelineLite();
tl.to(element, 1, {left:100}).to(element, 1, {top:50}).to(element, 1, {opacity:0});

现在，你可以随意调整任何动画，而不必担心延迟时间会发生混乱。增加第一个动画的持续时间，一切都会自动调整。

例子中使用的 CSS 属性动画（opacity、left、top 等）需要 CSSPlugin 插件支持，CSSPlugin 插件及 TweenLite 和 TimelineLite 等都包含在 TweenMax.min.js 中。如果你使用 TimelineLite.min.js/TimelineMax.min.js，则需另外加载 CSSPlugin.min.js 和 TweenLite.min.js。

TimelineMax 中文手册章节划分

• 01 节：时间轴初始化及动画管理 介绍了创建时间轴及添加删除动画的各种方法
• 如果想要对时间轴进行一些初始化设置，如重复次数( repeat ) 缓动方式( ease ) 等可参看 02 节：时间轴初始设置
• 03 节：时间轴事件 中介绍了时间轴的事件函数，如开始事件( onStart )、结束事件( onComplete )、返回事件( onReverseComplete ) 等
• 常用的时间轴播放组件在 04 节：时间轴播放组件 ，如播放（ play ）、暂停（ pause ）、重新播放（ restart ）等
• 05 节：时间轴属性调整 列出了你可以获取到的时间轴属性以及调整他们的方法，如时间轴时长（ time ）、播放进度（ progress ）
• 06 节：实例属性 介绍了 TimelineLite/TimelineMax 实例的属性设置，如设置数据、读取父时间轴等
• 07 节：实例方法 介绍了 TimelineLite/TimelineMax 实例的函数方法，导出时间轴、清空时间轴等

TimelineMax 和 TimelineLite 区别

我们的 API 文档大部分以 TimelineMax 为例。如果你使用的是简约版的 TimelineLite，把 TimelineMax 改为 TimelineLite。

TimelineLite 和 TimelineMax 共有方法

• add()
• addLabel()
• addPause()
• call()
• clear()
• delay()
• duration()
• eventCallback
• exportRoot()
• from()
• fromTo()
• getChildren()
• getLabelTime()
• getTweensOf()
• invalidate()
• isActive()
• kill()
• pause()
• paused()
• play()
• progress()
• remove()
• removeLabel()
• render()
• restart()
• resume()
• reverse()
• reversed()
• seek()
• set()
• shiftChildren()
• staggerFrom()
• staggerFromTo()
• staggerTo()
• startTime()
• time()
• timeScale()
• to()
• totalDuration()
• totalProgress()
• totalTime()
• useFrames()

TimelineMax 独有方法

• currentLabel()
• getActive()
• getLabelAfter()
• getLabelBefore()
• getlLabelsArray()
• repeat()
• repeatDelay()
• tweenFromTo()
• tweenTo()
• yoyo()