GSAP（TweenMax手册/TweenLite手册）之二

本文章内容是关于GSAP动画库中的TweenMax和TweenLite的使用，编写于2020年11月19日23:08（v1.0.0）。

四、动画播放组件

.play()

.play( from:*, suppressEvents:Boolean ) : *

控制动画往正方向播放，可设定开始的时间点。
如果suppressEvents保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

//在当前位置开始播放
myAnimation.play();
//在2秒钟位置开始播放
myAnimation.play(2);
//在2秒钟位置开始播放，并且不阻止期间的函数、事件
myAnimation.play(2, false);

返回self，方便链式设置，如tween.play().timeScale()

.play()适用于TweenMaxTweenLite

.play()的参数

参数名类型必填说明
from Num/label 否动画开始播放的时间（或TimelineLite/TimelineMax的label）如果没有定义，它将从播放头当前的位置开始播放
suppressEvents Boolean 否如果true（默认值），当播放头移动到from参数中定义的新位置时，不会触发任何事件或回调。

.play()效果展示

box = document.getElementById("box"),
playBtn = document.getElementById("playBtn"),
pauseBtn = document.getElementById("pauseBtn"),
resumeBtn = document.getElementById("resumeBtn"),
reverseBtn = document.getElementById("reverseBtn"),
playFromBtn = document.getElementById("playFromBtn"),
reverseFromBtn = document.getElementById("reverseFromBtn"),
seekBtn = document.getElementById("seekBtn"),
timeScaleSlowBtn = document.getElementById("timeScaleSlowBtn"),
timeScaleNormalBtn = document.getElementById("timeScaleNormalBtn"),
timeScaleFastBtn = document.getElementById("timeScaleFastBtn"),
restartBtn = document.getElementById("restartBtn"),
tween = TweenLite.to(box, 6, {left:"632px", ease:Linear.easeNone});playBtn.onclick = function() {//当前位置播放动画，如果动画播放完成, play() 无效tween.play();
}
pauseBtn.onclick = function() {tween.pause();
}
resumeBtn.onclick = function() {//当前位置继续动画.tween.resume();
}
reverseBtn.onclick = function() {tween.reverse();
}
playFromBtn.onclick = function() {//某时间点开始播放（秒）.tween.play(5);
}
reverseFromBtn.onclick = function() {//某时间点开始返回 (秒).tween.reverse(1);
}
seekBtn.onclick = function() {//跳到特定时间 (秒)tween.seek(3);
}
timeScaleSlowBtn.onclick = function() {//减速.tween.timeScale(0.5);
}
timeScaleNormalBtn.onclick = function() {//恢复速度.tween.timeScale(1);
}
timeScaleFastBtn.onclick = function() {//加速.tween.timeScale(2);
}
restartBtn.onclick = function() {//重新开始.tween.restart();
}

.play()的补充说明

由于序列动画（staggerTo()等）分解成了一个个动画，因此不能简单的使用tween动画的play()控制。可将序列动画添加至时间轴，再使用timeline的play()方法来播放。

.pause()

.pause( atTime:*, suppressEvents:Boolean ) : **

暂停动画，可选择跳转到特定时间。
如果suppressEvents保持默认状态并跳到新的时间点，那么之前在新旧时间点之间设置的回调或函数不会被触发，相当于跳过了那些时间点。如果想触发，设为false。

//暂停动画
myAnimation.pause();//跳转到第2秒并暂停动画
myAnimation.pause(2);//跳转到第2秒并暂停动画，并且不抑制事件和函数触发
myAnimation.pause(2, false);

返回self，方便链式调用

.pause()适用于TweenMaxTweenLite

.pause()的参数

参数名类型必填说明
atTime Num/label 否默认为null，动画暂停之前跳到的时间（或TimelineLite/TimelineMax的label）如果没有定义，它就在当前的位置暂停
suppressEvents Boolean 否如果true（默认值），当播放头移动到atTime参数中定义的新位置时，不会触发任何事件或回调。

.paused()

.paused( value:Boolean ) : *

获取或设置动画的暂停状态，该状态指示动画当前是否已暂停。

var paused = myAnimation.paused(); //获取暂停状态
myAnimation.paused( true ); //设置暂停状态(类似pause())
myAnimation.paused( !myAnimation.paused() ); //切换暂停/非暂停状态

返回值：
省略参数会返回当前值（getter），而定义参数会设置值（setter）并返回实例本身以便于链式调用。
例如 myAnimation.paused(true).delay(2).timeScale(0.5);

.paused()适用于TweenMaxTweenLite

.paused()的参数

参数名类型必填说明
value Boolean 否省略参数返回当前值（getter），而定义参数则设置值（setter）并返回实例本身以便于链式调用

.paused()效果展示

box = document.getElementById("box"),
playBtn = document.getElementById("playBtn"),
pauseToggleBtn = document.getElementById("pauseToggleBtn"),
tween = TweenLite.to(box, 6, {left:"632px", ease:Linear.easeNone});playBtn.onclick = function() {tween.play();
}
pauseToggleBtn.onclick = function() {tween.paused( !tween.paused() )
}

.paused()的补充说明

动画播放完成时，不会变成暂停状态。

.restart()

.restart( includeDelay:Boolean, suppressEvents:Boolean ) : *

重新开始动画/重头开始。

//略去delay马上重新开始
myAnimation.restart();//包含delay重新开始,并且不抑制事件触发
myAnimation.restart(true, false);

返回self，方便链式设置

.restart()适用于TweenMaxTweenLite

.restart()的参数

参数名类型必填说明
includeDelay Boolean 否设置重新开始动画时是否包含延迟（如果有），例如动画 new TweenLite(mc, 2, {x:100, delay:1});
当你restart()，他会略过delay马上开始。如果是restart(true)，则会有1秒的延迟。默认false。
suppressEvents Boolean 否如果true（默认值），当播放头移动到新位置时，不会触发任何事件或回调。

.restart()效果展示

box = document.getElementById("box"),
restartBtn = document.getElementById("restartBtn"),
restartBtn2 = document.getElementById("restartBtn2"),
tween = TweenLite.to(box, 6, {left:"632px",delay:2});restartBtn.onclick = function() {//重新开始.tween.restart();
}
restartBtn2.onclick = function() {//重新开始.tween.restart(true);
}

.resume()

.resume( from:*, suppressEvents:Boolean ) : *

恢复播放而不改变方向（前进或后退），可选择首先跳到特定时间。

//恢复播放
myAnimation.resume();//跳到第2秒并恢复播放
myAnimation.resume(2);//跳到第2秒并恢复播放，并且不抑制事件触发
myAnimation.resume(2, false);

返回self，方便链式设置

.resume()适用于TweenMaxTweenLite

.resume()的参数

参数名类型必填说明
from Num/label 否动画恢复播放之前跳转到的时间（或TimelineLite/TimelineMax的label）如果没有定义，它将从播放头当前的位置恢复播放。默认null
suppressEvents Boolean 否如果true（默认值），当播放头移动到from参数中定义的新位置时，不会触发任何事件或回调。

.resume()效果展示

box = document.getElementById("box"),
restartBtn = document.getElementById("restartBtn"),
restartBtn2 = document.getElementById("restartBtn2"),
tween = TweenLite.to(box, 6, {left:"632px",delay:2});restartBtn.onclick = function() {//重新开始.tween.restart();
}
restartBtn2.onclick = function() {//重新开始.tween.restart(true);
}

.reverse()

.reverse( from:*, suppressEvents:Boolean ) : *

控制动画反向播放。动画的各种表现都会反转，例如ease。

//当前位置反向播放myAnimation.reverse();//2秒位置反向播放myAnimation.reverse(2);//2秒位置反向播放，不抑制事件触发
myAnimation.reverse(2, false);//动画末端反向播放
myAnimation.reverse(0);//动画末端往回1秒位置反向播放
myAnimation.reverse(-1);//切换方向(如果它是前进方向，则反向播放。如果是反向的，则会向前播放)
if (myAnimation.reversed()) {myAnimation.play();
} else {myAnimation.reverse();
}

返回self，方便链式设置

.reverse()适用于TweenMaxTweenLite

.reverse()的参数

参数名类型必填说明
from Num/label 否动画反向播放前跳转到的时间（或TimelineLite/TimelineMax的label）如果没有定义，它将从播放头当前的位置开始反向播放。如果从最动画最末端开始播放，设置为0。如果时间基于反方向，可以设置为负数，如.reverse(-1)
suppressEvents Boolean 否如果true（默认值），当播放头移动到from参数中定义的新位置时，不会触发任何事件或回调。

.reverse()效果展示

playBtn = document.getElementById("playBtn"),
reverseBtn = document.getElementById("reverseBtn"),
reverseFromBtn = document.getElementById("reverseFromBtn"),
reverseFromBtn2 = document.getElementById("reverseFromBtn2"),
reverseFromBtn3 = document.getElementById("reverseFromBtn3"),
tween = TweenLite.to(box, 6, {left:"632px", ease:Linear.easeNone});playBtn.onclick = function() {//当前位置播放动画，如果动画播放完成, play() 无效tween.play();
}
reverseBtn.onclick = function() {tween.reverse();
}
reverseFromBtn.onclick = function() {//某时间点开始返回 (秒).tween.reverse(1);
}
reverseFromBtn2.onclick = function() {//某时间点开始返回 (秒).tween.reverse(-1);
}
reverseFromBtn3.onclick = function() {//某时间点开始返回 (秒).tween.reverse(0);
}

.reversed()

.reversed( value:Boolean ) : *

获取或设置动画的反转状态，指示是否应该反向播放动画。

var rev = myAnimation.reversed(); //获取反方向状态
myAnimation.reversed( true ); //设置反方向
myAnimation.reversed( !myAnimation.reversed() ); //切换方向

返回值：
省略参数会返回当前值（getter），而定义参数会设置值（setter）并返回实例本身以便于链式调用。
例如 myAnimation.paused(true).delay(2).timeScale(0.5);

.reversed()适用于TweenMaxTweenLite

.reversed()的参数

参数名类型必填说明
value Boolean 否省略参数返回当前反方向状态（getter），而定义参数则设置值（setter）并返回实例本身以便于链式设置

.reversed()效果展示

box = document.getElementById("box"),
playBtn = document.getElementById("playBtn"),
reverseToggleBtn = document.getElementById("reverseToggleBtn"),
tween = TweenMax.to(box, 6, {left:"632px", ease:Linear.easeNone});playBtn.onclick = function() {tween.play();
}
reverseToggleBtn.onclick = function() {tween.reversed( !tween.reversed() );
}

.reversed()的补充说明

方向状态不受yoyo影响，即yoyo返回时，仍然属于正向播放。

.seek()

.seek( time:*, suppressEvents:Boolean ) : *

不改变状态（播放、暂停、方向）的情况下直接跳转到某个时间点。

//跳转到第2秒
myAnimation.seek(2);//跳转到第2秒，并且不阻止期间的函数、事件
myAnimation.seek(2, false);

必须设定时间点返回self，方便链式设置

.seek()适用于TweenMaxTweenLite

.seek()的参数

参数名类型必填说明
time Num/label 是跳转到的时间秒数（或TimelineLite/TimelineMax的label）
suppressEvents Boolean 否如果true（默认值），当播放头移动到time参数中定义的新位置时，不会触发任何事件或回调。

.timeScale()

.timeScale( value:Number ) : *

获取/设定动画速度，默认为1。
例如0.5为慢速，2为快速。
如果设置则返回此动画实例便于链式调用。如不设置则返回时间调节比例。

.timeScale()适用于TweenMaxTweenLite

.timeScale()的参数

参数类型必填说明
value Number 否设置动画的时间调节比例，如不设置则读取时间调节比例，default = NaN

五、动画属性调整

.duration()

.duration( value:Number ) : *

获取或设置动画持续的时间。

var currentDuration = myAnimation.duration(); //gets current duration
myAnimation.duration(2); //sets duration

属性链式写法

myAnimation.duration(2).repeat(3).timeScale(2).play(0.5);

.duration()适用于TweenMaxTweenLite

.duration()效果展示

var myTween=new TweenMax('.box', 3, {x: 500,repeat: 3,repeatDelay:2, onUpdate:updateStats, onRepeat:updateReps,
});var duration = document.getElementById("duration"),totalDuration = document.getElementById("totalDuration"),repeatCount = document.getElementById("repeatCount"),totalRepeatCount = document.getElementById("totalRepeatCount"),time = document.getElementById("time"),totalTime = document.getElementById("totalTime"),progress = document.getElementById("progress"),totalProgress = document.getElementById("totalProgress"),reps = 0;function updateReps() {reps++;repeatCount.innerHTML = reps;
}function updateStats() {time.innerHTML = myTween.time().toFixed(2);totalTime.innerHTML = myTween.totalTime().toFixed(2);progress.innerHTML = myTween.progress().toFixed(2);totalProgress.innerHTML = myTween.totalProgress().toFixed(2);
}function reset() {reps = 0;duration.innerHTML = myTween.duration().toFixed(2);totalDuration.innerHTML = myTween.totalDuration().toFixed(2);repeatCount.innerHTML = reps;totalRepeatCount.innerHTML = myTween.repeat();
}reset();

.totalDuration()

.totalDuration( value:Number ) : *

获取或设定全部重复的动画的持续时间。

var total = myTween.totalDuration(); //gets total duration
myTween.totalDuration(10); //sets the total duration

.totalDuration()适用于TweenMaxTweenLite

.time()

.time( value:Number ) : *

获取或设置当前动画时间。

var currentTime = myTween.time(); //gets current time
myTween.time(2);
//sets time, jumping to new value just like seek().

.time()适用于TweenMaxTweenLite

.duration()效果展示

var timeView = document.getElementById("time");
new TweenMax('.box', 3, {x: 500,onUpdate:function(){timeView.innerHTML=this.time().toFixed(2);}
});

.totalTime()

.totalTime( time:Number, suppressEvents:Boolean ) : *

获取或设置总的动画时长。

var tt = myAnimation.totalTime(); //gets total time
myAnimation.totalTime(2); //sets total time, jumping to new value just like seek().

.totalTime()适用于TweenMaxTweenLite

.progress()

.progress( value:Number, suppressEvents:Boolean ) : *

获取或者设置单次动画的进程（从0到1）

var progress = myTween.progress(); //gets current progress
myTween.progress( 0.25 ); //sets progress to one quarter finished

.progress()适用于TweenMaxTweenLite

.totalProgress()

.totalProgress( value:Number, suppressEvents:Boolean ) : *

获取或者设置总的动画进程（从0到1）

.totalProgress()适用于TweenMaxTweenLite

.delay()

.delay( value:Number ) : *

获取或者设置动画的开始延迟秒数（帧）。

var currentDelay = myAnimation.delay(); //获取延迟
myAnimation.delay(2); //设置延迟

如果设置则返回self以便链式调用，如果留空则返回延迟秒数（帧）。

.delay()适用于TweenMaxTweenLite

.delay()的参数

参数类型必填说明
value Number 否设置动画的开始延迟秒数（帧），如果留空则读取动画的开始延迟秒数（帧）(default = NaN)

.delay()效果展示

var myTween=new TweenMax('.box', 3, {x: 500,
});
myTween.delay(3);
var panel= document.getElementById("panel");
panel.innerHTML= myTween.delay();

.invalidate()

刷新任何内部记录的开始/结束值，如果您想要重新启动动画而不恢复到以前记录的任何起始值，这将非常有用。

.invalidate()适用于TweenMaxTweenLite

.invalidate()效果展示

var t = TweenLite.to(".green", 1, {x:"+=100"});$("#restart").click(function(){t.restart();
})$("#invalidate").click(function(){t.invalidate();t.restart();
})

.isActive()

.isActive( ) : Boolean

指示动画当前是否处于活动状态（表示该虚拟播放头在该实例的时间跨度内活动移动，并且没有暂停，也没有任何其祖先时间轴）。因此，如果在补间中间，则它处于active状态，但在补间完成后（或在补间开始前），该补间不活动（返回false）。如果它被暂停或者被放置在暂停的时间轴内（或者其任何祖先时间轴被暂停），isActive() 则将返回 false。如果播放头直接位于动画开始时间的顶部（即使播放头尚未完成渲染），则视为“有效”。

您也可以检查 TweenMax.progress() or TweenMax.totalProgress()，但那些没有考虑暂停状态或父时间轴播放头的位置。

如果你想判断一个元素/对象是否在动画状态，可以使用TweenMax.isTweening()

.isActive()适用于TweenMaxTweenLite

.isActive()效果展示

var endX = 300;
var tween = TweenMax.to('.box', 2, {x:endX, ease:Linear.easeNone}).reverse();tweenBox=document.getElementById("tweenBox")
tweenBox.onclick=function(){if(!tween.isActive()){//only reverse the direction if the tween is not activetween.reversed(!tween.reversed())}
}

.updateTo()

.updateTo( vars:object, resetDuration:Boolean ) : *

更新动画的值即使动画正在运行中。updateTo()仅适合改变非插件值，因此如果你想改变插件属性（如CSSPlugin），这个方法不太适用，因为插件的计算方式较为复杂。例如{x:500}无效，需要写成{css: {x:500}}。

//一个通用的JavaScript对象（不是DOM元素）

var obj = {x:0, y:0, age:18, weight:180}
var tween = new TweenMax(obj, 2, {wide:100, high:200, age:40, weight:250});
//更新动画属性，并重新设定动画时长
tween.updateTo({wide:300, high:0}, true);
//更新动画属性，并使用剩余动画时长
tween.updateTo({wide:300, high:0}, false);

返回self。

.updateTo()适用于TweenMax

.updateTo()的参数

参数类型必填说明
vars object 是需要更新的属性值。只需设置要更新的属性即可，不必输入全部属性
resetDuration Boolean 否 (default = false) 更新后是否重新计算动画时长。如果动画已经开始并resetDuration是true，动画将重新计时

.updateTo()效果展示

var myTween = TweenMax.to(".box", 3, {x:500, y:100 ,opacity:0.2, rotation:360})
resetBtn = document.getElementById("resetBtn");
resetBtn.onclick = function() {// 改变属性后动画时长重新计算3秒myTween.updateTo({css: {x:300, y:0, opacity:0.2, rotation:360}}, true);
}

.startTime()

.startTime( value:Number ) : *

获取/设定动画在其父时间轴上的开始时间。

var start = myAnimation.startTime(); //gets current start time
myAnimation.startTime(2); //sets the start time

.startTime()适用于TweenMaxTweenLite

.startTime()效果展示

var myTween=new TweenMax('.box', 5, {x: 500,
});
myTween.startTime(2);

.endTime()

.endTime( includeRepeats:Boolean ) : Number

获取动画在父时间轴上的结束时间。

.endTime()适用于TweenMaxTweenLite

.endTime()效果展示

var tl = new TimelineLite();
var tween = TweenMax.to(".box", 1, {x:100}); //创建一个1秒钟的动画
tl.add(tween, 0.5); //将动画插入时间轴0.5秒处
document.getElementById("endTime1").innerHTML=tween.endTime(); //1.5秒结束
tween.timeScale(2); //设置动画双倍速度
document.getElementById("endTime2").innerHTML=tween.endTime(); //加速后1秒结束

.repeat()

.repeat( value:Number ) : *

获取或者设定动画在第一次完成后的重复次数。

var repeat = myTween.repeat(); //gets current repeat value
myTween.repeat(2); //sets repeat to 2

.repeat()适用于TweenMax

.repeatDelay()

.repeatDelay( value:Number ) : *

获取或者设置每次重复动画之间的间隔时间（秒）

var repeatDelay = myTween.repeatDelay(); //gets current repeatDelay value
myTween.repeatDelay(2); //sets repeatDelay to 2

.repeatDelay()适用于TweenMax

.yoyo()

.yoyo( value:Boolean ) : *

获取或设置补间动画的yoyo的状态。
如果你要使用yoyo的话，还需要设置repeat（动画重复次数）

var yoyo = myAnimation.yoyo(); //gets current yoyo state
myAnimation.yoyo( true ); //sets yoyo to true

链式设置多个属性

myAnimation.yoyo(true).repeat(3).timeScale(2).play(0.5);

还可以通过属性值来设置yoyo

TweenMax.to(mc, 1, {x:100, repeat:1, yoyo:true});

.yoyo()适用于TweenMax

六、实例属性

.data

.data : *

可用于存储你需要的数据。

myTween.data={data1:'value1',data2:'value2',} //存储
myTween.data.data1 //读取

.data适用于TweenMaxTweenLite

.data效果展示

myTween = new TweenMax('.box', 3, {x: 500,
});
myTween.data={data1:'value1',data2:'value2',}
console.log(myTween.data.data1);

TweenLite.defaultEase

TweenLite.defaultEase : Ease

用于更改TweenLite默认的缓动方式，默认的缓动方式是Power1.easeOut。

TweenLite.defaultEase = Bounce.easeOut

TweenLite.defaultEase适用于TweenLite

TweenLite.defaultEase效果展示

TweenLite.defaultEase = Bounce.easeOut
new TweenLite('.box', 3, {x: 500,
});

TweenLite.defaultOverwrite

TweenLite.defaultOverwrite : String = “auto”

设置TweenLite的默认overwrite模式。
可选值包括"auto", “all”, “none”, “allOnStart”, “concurrent”, “preexisting”。默认是"auto"。

TweenLite.defaultOverwrite="all"

TweenLite.defaultOverwrite适用于TweenLite

TweenLite.defaultOverwrite的参数

模式模式代码说明效果
0 "none"或者false 不做任何处理前三秒运行x: 200,y:100
后三秒运行x: 700,y:100
1 "all"或者true 覆盖所有只运行x: 200
2 “auto” 仅覆盖重复的属性
默认模式前三秒运行x: 200,y:100
后三秒运行y:100
3 “concurrent” 同时发生跟模式1很相似，不同是它只覆盖掉正在运行的动画属性。而放过其他的没有启动的动画属性。
4 “allOnStart” 开始时覆盖跟模式1非常像。两点不同是他是在动画属性第一次渲染时才覆盖掉其他所有的动画属性，而且这个会把在他之后创建的动画属性也覆盖掉。
5 “preexisting” 在动画属性第一次渲染时才覆盖掉其他所有的动画属性。

TweenLite.defaultOverwrite效果展示

TweenLite.defaultOverwrite="all"
TweenLite.to('.box', 6, {x: 700,y:100,});
TweenLite.to('.box', 3, {x: 200});

TweenLite.onOverwrite

TweenLite.onOverwrite : Function

当一个补间动画被另外一个补间动画覆盖时产生的事件函数。

TweenLite.onOverwrite = function(overwritten, overwriting, target, props) {...}

TweenLite.onOverwrite适用于TweenLite

TweenLite.onOverwrite的参数

onOverwrite可以传递以下参数。

参数类型说明
overwrittenTween Tween 被覆盖的补间动画
overwritingTween Tween 覆盖的补间动画
target Object 动画目标（只有"auto"模式才会传递此参数），与overwrittenTween.target类似
例如：TweenLite.to([obj1, obj2], 1, {x:100}) 和 TweenLite.to(obj2, 1, {x:50}), 目标应是 obj2
overwrittenProperties Array 一个属性数组，包含了被覆盖的动画属性（只有"auto"模式才会传递此参数），
例如：[“x”,“y”,“opacity”]

TweenLite.onOverwrite效果展示

TweenLite.onOverwrite = function(overwritten, overwriting, target, props) {console.log("被覆盖的动画");console.log(overwritten);console.log("覆盖的动画")console.log(overwriting);console.log("被覆盖的动画的目标对象");console.log(target.innerHTML);console.log("被覆盖的属性");console.log(props);
}TweenLite.to(".green", 2, {x:400, y:200});
//after 1 second the next tween will overwrite the x property of the previous tween
TweenLite.to(".green", 1, {x:100, delay:1});

TweenLite.selector

TweenLite.selector : * = document.getElementById()

当动画接收字符串作为其目标时使用的选择器引擎（如jQuery，但默认为document.querySelectorAll()）。

TweenMax的对象选择器接受dom或者string作为目标，如"#myID"。TweenMax 不依赖jQuery，但如果引入了jQuery，TweenMax会优先使用jQuery的选择器，如"p:first"，否则回退到document.querySelectorAll()及document.getElementById()。

接入了Jquery时，可用以下

TweenLite.defaultEase = Bounce.easeOut

TweenLite.defaultEase适用于TweenLite

TweenLite.defaultEase效果展示

TweenLite.defaultEase = Bounce.easeOut
new TweenLite('.box', 3, {x: 500,
});

.target

.target : Object

获取动画的目标对象。

myTween.target

.target适用于TweenMaxTweenLite

.data效果展示

myTween=new TweenLite('.box', 3, {x: 500,
});
console.log(myTween.target);

.timeline

.timeline : SimpleTimeline

获取动画的父级时间轴对象（只读）。

mytween.timeline

每个动画都放在时间轴上（默认为根时间轴），并且只能有一个父时间轴。一个实例不能同时存在于多个时间轴中。

.timeline适用于TweenMaxTweenLite

.timeline效果展示

mytween = TweenMax.to('.box', 3, {x:500});
console.log(mytween.timeline);

.vars

.vars : Object

一个存储了传递给构造器的配置变量的对象。包含动画选项和回调函数等。例如delay、paused、onComplete。

.vars适用于TweenMaxTweenLite

.vars效果展示

myTween = new TweenMax('.box', 3, {x: 500,ease: Bounce.easeOut
});
console.log(myTween.vars);

TweenMax.ticker

TweenMax.ticker : Object

设置动画核心引擎，每当引擎update时这个对象将分配tick事件，你可以添加你自己的listener来运行自定义逻辑（非常适合游戏开发人员）。

简约的监听方法

//添加监听
TweenMax.ticker.addEventListener("tick", myFunction);function myFunction() {//核心引擎update时处理这个事件
}//移除监听
TweenMax.ticker.removeEventListener("tick", myFunction);

目前主流浏览器都由requestAnimationFrame事件驱动，通常，requestAnimationFrame事件每秒发生约60次，但这取决于浏览器并且还取决于系统性能。如果requestAnimationFrame 不支持，则ticker会自动回退到使用setTimeout()这种所有浏览器都支持的常规模式。

自定义ticker
要ticker使用setTimout()而不是requestAnimationFrame，您可以使用useRAF()方法：

//关闭requestAnimationFrame,切换ticker使用setTimeout()来替换
TweenMax.ticker.useRAF(false);]

如果你想调整帧速率，可以使用fps()方法，帧速率超过60无效

//帧速调整为30
TweenMax.ticker.fps(30);

如果你确实想将帧速率调整到100（不推荐），你可以先把requestAnimationFrame关闭TweenMax.ticker.useRAF(false)转为setTimeout()，再设定TweenMax.ticker.fps(100)即可。
完整的监听方法
如果你还想定义一下监听函数的作用域等，可以这样写

addEventListener(type, callback, scope, useParam, priority)

参数名类型必填说明
type String 是监听类型，一般是"tick"
callback Function 是事件触发的函数
scope Object 否限定函数的范围，一般是"this"
useParam Boolean 否如果设置为true每次触发时将产生事件对象，事件对象包含type(一般是"tick")和target，默认是false以提高性能
priority Integer 否函数调用的优先级，高级的比低级的优先处理

//添加请求事件对象参数event的侦听器，将范围绑定到当前范围（this），并将优先级设置为1，以便优先处理TweenMax.ticker.addEventListener("tick", myFunction, this, true, 1);function myFunction(event) {//核心引擎update时处理这个事件
}//移除监听TweenMax.ticker.removeEventListener("tick", myFunction);

TweenMax.ticker效果展示

new TweenMax('.box', 3, {x: 500,
});
TweenMax.ticker.fps(3);//设置帧速率为3，每秒钟触发三次tick监听事件
TweenMax.ticker.addEventListener("tick", myFunction,this,true,1);
function myFunction(event) {console.log(event);//useParam设置为true时产生事件对象，如果设置为false则event为undefined但会提高性能
}

六、实例方法

TweenMax.getTweensOf()

TweenMax.getTweensOf( target:Object, onlyActive:Boolean ) :

用来获取某个物体上的所有TweenLite、TweenMax对象
如果my_mc上使用了不止一个的缓动效果，那么这里将返回一个数组，数组中是不同的缓动效果的实例，可以用来对每个缓动进行实时的控制。例如:

TweenMax.getTweensOf(my_mc);

TweenMax.getTweensOf()适用于TweenMaxTweenLite

TweenMax.getTweensOf()效果展示

var myTween=new TweenMax('.box', 3, {x: 500,
});
console.log(TweenMax.getTweensOf('.box'));

TweenMax.getAllTweens()

TweenMax.getAllTweens( includeTimelines:Boolean ) : Array

获取所有动画实例的数组（或时间轴，不包括根时间轴）。

TweenMax.getAllTweens()适用于TweenMax

TweenMax.getAllTweens()的参数

参数类型必填说明
includeTimelines Boolean 否 (default = false) 返回结果是否包含时间轴实例（TimelineLite和TimelineMax）

TweenMax.getAllTweens()的补充说明

当autoRemoveChildren属性设为true的时候，已经完成的动画就不会再存在于时间轴上了。如果你是想控制所有动画、时间轴、函数，如pause()或reverse()或调整timeScale，你可以试试TimelineLite.exportRoot()方法。

.kill()

.kill( vars:Object, target:Object ) : *

消灭整个动画或部分参数。返回self便于链式调用。

//删除动画
myAnimation.kill();//删除动画的x和y属性
myAnimation.kill({x:true, y:true});//删除对象"myObject"上的动画，如果动画有多个对象，其他对象上的动画不会删除
myAnimation.kill(null, myObject);//仅删除对象"myObject"的动画的x和y属性
myAnimation.kill({x:true, y:true}, myObject);//仅删除对象"myObject1"和"myObject2"对象的"opacity"属性
myAnimation.kill({opacity:true}, [myObject1, myObject2]);

.kill()适用于TweenMaxTweenLite

.kill()的参数

参数类型必填说明
vars Object 否需要清除的属性，如{x:true, y:true}，属性值无关紧要，{x:false, y:false}也是相同效果。留空则清除全部属性
target Object 否清除与该目标相关的属性，如kill(null, [myObject1, myObject2])。留空则选择全部目标。

TweenMax.killDelayedCallsTo()

TweenMax.killDelayedCallsTo( function:Function ) :

立刻杀死所有延迟执行函数。

TweenMax.killDelayedCallsTo(myFunction);

由于延迟执行函数就像一个动画（用到target和onComplete），因此以下两行效果相同。

TweenMax.killTweensOf(myFunction)
TweenMax.killDelayedCallsTo(myFunction)

这个方法可杀死由TweenLite.delayedCall() 、TweenMax.delayedCall() 、call() 或addCallback()创建的延迟执行函数。

TweenMax.killDelayedCallsTo()适用于TweenMaxTweenLite

TweenMax.killDelayedCallsTo()的参数

参数类型必填说明
function Function 是杀死的函数

TweenMax.killDelayedCallsTo()效果展示

var myTween=new TweenMax('.box', 3, {x: 500,
})
TweenMax.delayedCall(2,myFunction,["参数1","参数2"])
TweenMax.killDelayedCallsTo(myFunction);
function myFunction(param1, param2) {alert("延迟2秒输出"+param1+'和'+param2);
}

TweenMax.killTweensOf()

TweenMax.killTweensOf( target:Object, vars:Object ) :

移除指定对象的所有动画（或特定动画属性）或移除延迟执行函数。

TweenMax.killTweensOf(myObject);
//清除某个对象的动画(tween)TweenMax.killTweensOf(myObject, {opacity:true, x:true});
//清除某个对象的某些属性参数

TweenMax.delayedCall(5, myFunction); //创建延迟执行函数
TweenMax.killTweensOf(myFunction); //移除延迟执行函数，或者使用killDelayedCallsTo

TweenMax.killTweensOf()适用于TweenMaxTweenLite

TweenMax.killTweensOf()的参数

参数名类型是否必填描述
target object 是清除动画的对象或选择器文本，也可以传入对象数组
vars Object 否需要清除的属性参数，如果不设置或者设置为null即清除全部属性

TweenMax.killTweensOf()的补充说明

killTweensOf()会将还没开始的动画清除，例如你的动画有5秒的delay，你在第2秒时执行TweenLite.killTweensOf(mc)，这个动画也会被清除。

TweenMax.killAll()

TweenMax.killAll( complete:Boolean, tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :

删除所有补间动画或延迟执行函数或时间轴，可选择强制它们先完成。

//删除所有
TweenMax.killAll();
//仅删除补间动画
TweenMax.killAll(false, true, false, false);
//仅删除延迟执行函数
TweenMax.killAll(false, false, true, false);

TweenMax.killAll()适用于TweenMax

TweenMax.killAll()的参数

参数类型必填说明
complete Boolean 否 (default = false) 终止之前是否先强制他们完成
tweens Boolean 否 (default = true)是否终止动画
delayedCalls Boolean 否 (default = true)是否终止延迟执行函数
timelines Boolean 否 (default = true)是否终止时间轴

TweenMax.killChildTweensOf()

TweenMax.killChildTweensOf( parent:Object, complete:Boolean ) :

删除/杀死（kill）特定DOM元素的子元素的所有补间动画，可选择强制它们首先完成。
例如你的HTML结构如下:

<div id="d1"><div id="d2"></div><img id="image" src="img.jpg" />
</div>
<div id="d3"></div>

你为全部元素都创建了动画，这时你想删除d1子元素（d2、image）的补间动画，你可以使用TweenMax.killChildTweensOf( document.getElementById(“d1”) )

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});//仅删除前两个动画
TweenMax.killChildTweensOf( document.getElementById("d1") );

TweenMax.killChildTweensOf()适用于TweenMax

TweenMax.killChildTweensOf()的参数

参数类型必填说明
parent Object 是你要删除的动画的父级元素
complete Boolean 否 (default = false) 删除之前是否先强制他们完成

TweenLite.render()

TweenLite.render( ) :

强制渲染所有活动的补间动画。这可能会很有用，例如你设置了一堆from()补间动画，然后你需要强制立即渲染（甚至是lazy补间动画），以避免在渲染之前发生短暂的延迟。

TweenLite.render()适用于TweenLite

TweenMax.lagSmoothing()

TweenMax.lagSmoothing( threshold:Number, adjustedLag:Number ) :

卡顿平滑补偿机制，当你的动画卡住时平分卡顿的时间使其看起来不是很卡。
lagSmoothing()允许你控制在引擎的两次tick（update）之间经过太多时间时发生的情况，调整核心计时机制以补偿并避免跳帧。
lagSmoothing()的默认阈值是500ms，调整帧速是33ms。也就是说，如果你的卡顿超过500ms，那么你的帧速降至33ms以平分这些卡顿，跳帧完成后帧速恢复为默认帧速。如果你想改变这个默认数值，可以执行如下指令：

//只有两帧之间超过1000ms才触发补偿机制
//调整帧速为16ms
TweenMax.lagSmoothing(1000, 16);

TweenMax.lagSmoothing()适用于TweenMaxTweenLite

TweenMax.lagSmoothing()的参数

参数类型必填说明
threshold Number 否补偿阈值，默认为500ms（这是比较理想的值）
adjustedLag Number 否调整后的帧速，默认为33ms，一般不能小于16ms

TweenMax.lagSmoothing()的补充说明

在大多数真实场景中，默认值为500和33是理想的，因为它们可以防止浏览器/ CPU中的重大故障，同时允许帧速率的微小变化，而不会不必要地减慢速度。
如果你想关闭lagSmoothing()功能，可以设置成TweenMax.lagSmoothing(0)或者设置成超大值，样它就不会启动。

TweenMax.globalTimeScale()

TweenMax.globalTimeScale( value:Number ) :

用来读取或设置所有动画的全局播放速率，例如1为正常速度，0.5为一半速度，2为2倍速度，能取的最小值为0.0001。

TweenMax.globalTimeScale(0.5); //半速运行
TweenMax.globalTimeScale(2); //2倍速率运行
var currentTimeScale = TweenMax.globalTimeScale(); //获取当前的全局速率

TweenMax.globalTimeScale()适用于TweenMax

TweenMax.globalTimeScale()的参数

参数类型必填说明
value Number 否影响所有动画的乘数，1为正常速度，0.5为半速，2为双倍速度等。省略参数将返回当前值（getter），而定义参数则设置值（setter）。

TweenMax.globalTimeScale()效果展示

TweenMax.globalTimeScale(0.2);
var myTween = TweenMax.to(".box", 1, {x: 500,
})

TweenMax.globalTimeScale()的补充说明

上例中虽然设置了动画为1秒，但是由于全局速率设置为减慢至0.2，因此动画实际运行了5秒。
与.timeScale()不同的是，.timeScale()设置的是单个动画的速率。

TweenMax.isTweening()

TweenMax.isTweening( target:Object ) : Boolean

判断一个元素是否处于动画激活状态，返回true或false。元素在时间轴上反方向移动或者加/减速时会出现错判。

TweenMax.isTweening(obj)

TweenMax.isTweening()适用于TweenMax

TweenMax.isTweening()的参数

参数类型必填说明
target Object 是需要判断的目标对象

TweenMax.isTweening()的补充说明

一个动画在暂停状态，或者未启动或者已完成，不会被认为是激活状态。

TweenMax.pauseAll()

TweenMax.pauseAll( tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :

暂停所有动画或时间轴或回调函数。

TweenMax.pauseAll()适用于TweenMax

TweenMax.pauseAll()的参数

参数类型必填说明
tweens Boolean 否 (default = true)是否暂停动画
delayedCalls Boolean 否 (default = true)是否暂停回调函数
timelines Boolean 否 (default = true)是否暂停时间轴（TimelineLite和TimelineMax实例）

TweenMax.pauseAll()的补充说明

还有一种更灵活的全局控制方法TimelineLite.exportRoot()，此方法将根时间轴上的所有动画/时间轴/回调函数导出到新的时间轴加以控制，如pause(), resume(), reverse() 甚至调整timeScale。

TweenMax.resumeAll()

TweenMax.resumeAll( tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :

恢复运行所有暂停的动画或时间轴或回调函数。

TweenMax.resumeAll()适用于TweenMax

TweenMax.resumeAll()的参数

参数类型必填说明
tweens Boolean 否 (default = true)是否恢复运行所有动画
delayedCalls Boolean 否 (default = true)是否恢复运行所有回调函数
timelines Boolean 否 (default = true)是否恢复运行所有时间轴（TimelineLite和TimelineMax实例）

TweenMax.resumeAll()的补充说明

3.GSAP（TweenMax手册/TweenLite手册）之二相关推荐

2.GSAP（TweenMax手册/TweenLite手册）之一
GSAP(TweenMax手册/TweenLite手册)之一本文章内容是关于GSAP动画库中的TweenMax和TweenLite的使用,编写于2020年10月22日00时47分(v1.0.0). ...
用友EAI企业应用集成使用手册U8EAI手册2006年下载
用友EAI企业应用集成使用手册U8EAI手册2006年最近有一个项目,要进行用友二次开发也就是U8二次开发,找了一些开发资料有需要的朋友,可以下载U8开发资料来看看,下面是用友开发资料的下载有地址 ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
c语言程序设计第四版乌云高娃,C语言程序设计教学课件作者第3版乌云高娃学习手册C语言程序设计教学课件作者第3版乌云高娃学习手册学习手册第10章文件及其应用课件.docx...
C语言程序设计教学课件作者第3版乌云高娃学习手册C语言程序设计教学课件作者第3版乌云高娃学习手册学习手册第10章文件及其应用课件.docx 学习手册(1):文本文件的操作学习内容文本文件的操作学习目标 ...
c/c++参考手册与手册查阅（apiref.com/Microsoft doc/cppReference/cplusplus)
文章目录 c/c++参考手册与手册查阅(apiref.com/Microsoft doc/cppReference/cplusplus) 手册查阅 c c++ 离线手册(pdf/html) pdf 相 ...
专栏 | 基于 Jupyter 的特征工程手册：特征选择（二）
作者:陈颖祥.杨子晗编译:AI有道数据预处理后,我们生成了大量的新变量(比如独热编码生成了大量仅包含0或1的变量).但实际上,部分新生成的变量可能是多余:一方面它们本身不一定包含有用的信息,故无法 ...
（转）PowerHA完全手册（一，二，三）
PowerHA完全手册(一) 原文:http://www.talkwithtrend.com/Article/39889-----PowerHA完全手册(一) http://www.talkwitht ...
C核心技术手册（四十二）
18.4 C方言当编写一个C程序时,首先要做的一件事是确定在多种C的定义中遵循哪一种,GCC的默认方言版本为"GNU C",它在很大程度上为ISO/IEC 9899:1900标准 ...
python控制结构(二)_Python学习手册之控制结构（二）
在上一篇文章中,我们介绍了Python的一些控制结构,现在我们继续介绍剩下的 Python 控制结构.查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9972 ...