TimelineMax中文手册/TimelineLite中文手册

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 共有方法 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()
 currentLabel()
getActive()
getLabelAfter()
getLabelBefore()
getlLabelsArray()
repeat()
repeatDelay()
tweenFromTo()
tweenTo()
yoyo()
 
 
 
 
 
 

TimelineMax中文手册