TimelineMax
TimelineMax是TimelineLite的扩展,提供更多特性比如:
repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (在未来甚至更多)
这是最终的序列工具,就像一个包裹tween
和timelines
的容器。
基于很多特性与Tweenlinelite
类似,因此不再重复。
特殊属性与回调函数
你可以用vars
来配置TimelineMax:
new TimelineMax({onComplete:myFunction, repeat:2, repeatDelay:1, yoyo:true});
特殊属性参考TweenMax
简单例子
var tl = new TimelineMax({repeat:3, repeatDelay:1, 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 to() (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( new TweenLite(element, 2, {rotation:"+=360"}), "spin");
//go to the "spin" label and play the timeline from there
tl.play("spin");
//nest another TimelineMax inside your timeline...
var nested = new TimelineMax();
nested.to(element2, 1, {left:200}));
tl.add(nested);
公共属性
autoRemoveChildren : Boolean
当tween/timeline完成后自动移除。
data : *
放数据的地方
smoothChildTiming : Boolean
控制是否tween/timeline会自动重新定位(改变他们的startTime),以保持流畅播放时,性能上即时改变。
timeline : SimpleTimeline
容器的timeline
公共函数
名称 | 功能 |
---|---|
recent ( ) : Animation | 无论其在时间线中的位置返回最近添加的tween/timeline回调。 |
add ( value:, position:, align:String, stagger:Number ) : * | [覆盖]添加一个a tween, timeline, callback, 或者 label (或者其中任意数组形式)到timeline |
addCallback ( callback:Function, position:, params:Array, scope: ) : TimelineMax | 在一个指定位置添加一个回调函数 |
currentLabel ( value:String ) : * | 获取位于或在当前时间之前,或跳转到一个提供标签(行为取决于你是否传递参数的方法)最接近的标签。 |
getActive ( nested:Boolean, tweens:Boolean, timelines:Boolean ) : Array | 返回tween/timeline线当前处于活动状态的时间线中,这意味着时间轴的播放头放置在tween/timeline没有被暂停。 |
getLabelAfter ( time:Number ) : String | 返回时间参数后发生的下一个标签(如果有的话)。 |
getLabelBefore ( time:Number ) : String | 返回的时间参数之前发生的先前标签(如果有的话)。 |
getLabelsArray ( ) : Array | 返回的标签对象的数组,每一个都有name 和time 属性,为了能够在timeline中触发他们 |
invalidate ( ) : * | [覆盖]清除任何初始化数据(如开始/在补间结束值),举个例子,你要重新开始补间没有恢复到任何先前记录的初始值时非常有用。 |
progress ( value:Number, suppressEvents:Boolean ) : * | [覆盖]获取或设置时间表的进度是介于0和1之间的值,指示虚拟播放头的位置(不包括重复),其中0为开头,0.5是一半完成,1是完整的。 |
removeCallback ( callback:Function, timeOrLabel:* ) | 在指定的位置删除回调 |
repeat ( value:Number ) : * | 获取或设置timeline应在其第一次迭代后重复的次数。 |
repeatDelay ( value:Number ) : * | 获取或设置在几秒钟的时间量(或帧用于帧为基础的时间表)重复之间。 |
time ( value:Number, suppressEvents:Boolean ) : * | [覆盖]获取或设置播放头(本质上是当前时间),不包括任何重复或repeatDelays的局部位置。 |
totalDuration ( value:Number ) : * | [覆盖]获取或设置时间表,以秒(或帧的帧为基础的时间表),包括任何重复或repeatDelays的总时间。 |
totalProgress ( value:Number, suppressEvents:Boolean ) : * | [覆盖]获取或设置时间线的总的进展是介于0和1之间的值,指示虚拟播放头(包括重复),其中0是在开始时的位置,0.5是在中途点,和1是在结束(完成)。 |
tweenFromTo ( fromPosition:, toPosition:, vars:Object ) : TweenLite | 创建一个基本tween从一个特定的时间或标签到另一个时间或标签播放头,然后停止线性补间。 |
tweenTo ( position:*, vars:Object ) : TweenLite | 创建一个基本擦洗播放头转到一个特定的时间或标签,然后停止线性补间。 |
yoyo ( value:Boolean ) : * | 获取或设置时间表的YOYO状态,其中true会导致时间线来回走,交替向前,向后各重复。 |