TimelineLite

只是一个强大的动画序列工具，能简单的控制tweens和其它timeline，并且基于时间线控制动画播放。 如果没有这个工具，制作复杂的动画将很麻烦。原因是每个tween都需要自己添加delay。比如：

TweenLite.to(element, 1, {left:100});
TweenLite.to(element, 1, {top:50, delay:1});
TweenLite.to(element, 1, {opacity:0, delay:2});

整个动画是先将元素的left属性增加到100，然后top到50，最后改变透明度为0.如果你想要增加第一个tween持续时间为1.5，你需要改变后续所有的delay。如果你想用pause()整个序列或者restart()或者reverse()或者跳到一个指定的时间点该如何做？如果仅仅只用TweenLite你会发现步骤非常繁琐，但是如果用TimelineLite你会发现这些将很简洁：

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

//then later, control the whole thing...
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});

TimelineLite特性

1.事件可以在时间轴上重叠。你有完全的控制权来安排tween或者timeline的放置位置。想象一下你想在启动前淡出0.5秒，通过TimelineLite将很容易实现。

2.任何时候添加标签,play(), stop(), seek(), restart(),even reverse()都会很平滑。

3.可以在timeline中嵌套timeline，这意味你可以重用你的代码，使其更有效率。比如你可以这么写：

myTimeline.append( myObject.animateIn() ).append( myObject.animateOut(), "+=4").append( myObject2.animateIn(), "-=0.5")

4.通过timeScale()加速或者减慢整个timeline将变得很顺利。

5.通过progress()获取或者设置timeline的progress，比如你可以用myTimeline.progress(0.5)跳过一半的动画。

6.tween的time或者progress能让timeline加速向前或者倒带，这意味着你可以添加一个slider给这些属性，让用户能自主的拖动向前或者倒带。

7.像var tl = new TimelineLite({onComplete:myFunction})这样通过构造函数vars 来添加onComplete, onStart, onUpdate, 和 onReverseComplete回调函数。

8.用kill(null, target)干掉目标的tween或者getTweensOf()获得目标的tween，或者getChildren()获得timeline的所有tweens。

9.通过传递参数useFrames:true将用帧代替秒。而且它的children也将用这个时间模式。

10.通过TimelineLite.exportRoot()将所有tween和timeline从主timeline中导出到一个实例。这样你可以很简单的通过pause() 和reverse()来控它们。这在游戏制作中很有用。

11.如果你需要更多的特性比如repeat, repeatDelay,yoyo, currentLabel(), getLabelAfter(), getLabelBefore(), addCallback(), removeCallback(), getActive().

特殊属性,Ease和回调函数

你可用自定义构造器函数vars来定义一些特殊的属性比如： new TimelineLite({onComplete:myFunction, delay:2})

由于TimelineLite是TimeLite的扩展，因此一些TimeLite的特殊属性我将不再重复，而是挑出TimelineLite特有的。

tweens 数组

立刻插入一些tweens到timeline,这个值只在add()函数中传递，用tweens可以传递TweenLite/TweenMax/TimelineLite/TimelineMax 这些数组

align 字符串

当多个tweens插入时将这些tweens结合。这个值只在add()函数中传递，默认是'normal' 有以下选择：

sequence：将tweens一个个在序列中对齐

start:对齐所有tweens的开始时间(无视delay)

normal：对齐所有tweens的开始时间(容许延迟)

这个属性并不是强制所有child的timeline保持相对位置，它只影响最初tweens的排列。

stagger 数值

如果它值是0.5 而且align属性是start,那么第二个tween将在第一个tween开始0.5秒后开始，然后第三个tween将在第二个tween开始0.5秒后开始，以此类推。

如果align属性是sequence,那么每次tween之间增加0.5.默认值为0

autoRemoveChildren Boolean值

如果为true,如果每个child完成后，会被自动移除。它可以用来提高速度和内存管理。

smoothChildTiming Boolean值

控制child的timeline是否会自动重新定位(改变他们的startTime)来保持流利播放。

onReverseCompleteParams 数组

onReverseComplete函数中传递参数

new TimelineLite({onReverseComplete:myFunction, onReverseCompleteParams:["param1", "param2"]});

简单的例子:

//create the timeline with an onComplete callback that calls myFunction() when the timeline completes
var tl = new TimelineLite({onComplete:myFunction});
//add a tween
tl.add( TweenLite.to(element, 1, {left:200, top:100}) );

//add another tween at the end of the timeline (makes sequencing easy)
tl.add( TweenLite.to(element, 0.5, {opacity:0}) );

//append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds
tl.to(element, 1, {rotation:30}, "+=0.5");

//reverse anytime
tl.reverse();
//Add a "spin" label 3-seconds into the timeline
tl.addLabel("spin", 3);
//insert a rotation tween at the "spin" label (you could also define the insertion point as the time instead of a label)
tl.add( TweenLite.to(element, 2, {rotation:"+=360"}), "spin");

//go to the "spin" label and play the timeline from there
tl.play("spin");
//nest another TimelineLite inside your timeline...
var nested = new TimelineLite();
nested.to(element, 1, {left:400}));
tl.append(nested);

公共属性/函数

重复的将不再提

//demo待续