TweenLite
靜態屬性
TweenLite.defaultEase
設置默認的緩動函數
靜態方法
TweenLite.to()
1 | TweenLite.to( target:Object, duration:Number, vars:Object):TweenLite |
功能:用來創建動畫
參數:
target:要創建動畫的影片剪輯
duration:動畫持續的時間,以秒為單位(如果整個動畫模式是基於幀的話則以幀為單位)
vars:要參與動畫的屬性,以對象形式來寫,比如{x:100,y:100,…},這些屬性是動畫完成的目標
例:
TweenLite.to(mc, 1, {x:100});
var myTween:TweenLite = new TweenLite(mc, 1, {x:100}); //以第一個代碼效果相同
var myTween:TweenLite = TweenLite.to(mc, 1, {x:100}); //以第一個代碼效果相同
TweenLite.from()
1 | TweenLite.from( target:Object, duration:Number, vars:Object):TweenLite |
功能:用來創建動畫,與TweenLite.to不同的是,這個函數動畫的屬性目標是影片剪輯的現有屬性,初始屬性是vars設定的屬性
參數:
target:要創建動畫的影片剪輯
duration:動畫持續的時間,以秒為單位(如果整個動畫模式是基於幀的話則以幀為單位)
vars:要參與動畫的屬性,以對象形式來寫,比如{x:100,y:100,…},這些屬性是動畫的初始屬性
例:TweenLite.from(mc, 1, {x:100});
TweenLite.delayedCall()
1 | TweenLite.delayedCall( delay:Number,onComplete:Function,onCompleteParams:Array = null, useFrames:Boolean = false):TweenLite |
功能:用於在一定時間或一定幀數後自動執行一個函數,相當於一個延遲器吧
參數:
delay:要延遲執行函數的時間(或是幀數)
onComplete:要延遲執行的函數
onCompleteParams:要延遲執行的函數的參數,以數組形式傳入
useFrames:指明是用時間還是幀數來記時
例:TweenLite.delayedCall(1, myFunction, [“param1”, 2]);
TweenLite.killTweensOf()
1 | TweenLite.killTweensOf( target:Object, complete:Boolean = false, vars:Object = null):void |
功能:用來消除動畫
參數:
target:要消除動畫的影片剪輯
complete:如果為真則會在消除動畫的同時把動畫屬性設為完成時的值,如果為假則不會
vars:要消除動畫的屬性,以對象形式來寫,比如{x:true,y:true,…},這些屬性將不再參與動畫
例:TweenLite.killTweensOf(mc, false, {alpha:true, x:true});
動畫屬性對象 vars:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | { delay:Number 在開始動畫前要等待的時間,單位為秒(或幀數) useFrames:Boolean 如果設為true則動畫模式是基於幀的,否則是基於時間的(指的是動畫函數中要指定時間的地方) ease:Function 緩動函數,默認為Quad.easeOut easeParams:Array 緩動函數的參數,以數組形式傳入,注意只是有些緩動函數才需要需要參數的 immediateRender:Boolean 當值為false時, overwrite:int 用來控制同一個對象上有多個動畫時的覆蓋之類的情況,tweenlite只有1和2這兩種情況可選,具體請見OverwriteManager onInit:Function 當動畫開始渲染(或是說開始運行時)前要執行的函數 onInitParams:Array onInit函數的參數,以數組形式傳入 onStart:Function 當動畫開始渲染時要執行的函數,有可能會被執行多次,因為動畫時可以重復開始的 onStartParams:Array onStart函數的參數,以數組形式傳入 onUpdate:Function 當每一次動畫屬性值發生變化時調用的函數 onUpdateParams:Array onUpdate函數的參數,以數組形式傳入 onComplete:Function 當動畫執行完畢後要調用的函數 onCompleteParams:Array onComplete函數的參數,以數組形式傳入 onReverseComplete:Function 當一個動畫被反轉後又回到了原點時調用的函數 onReverseComplete:Array onReverseComplete函數的參數,以數組形式傳入 } |
OverwriteManager
1 | OverwriteManager |
NONE(0)
同一個物體上的動畫之間不會被覆蓋
ALL_IMMEDIATE(1)
會立即覆蓋之前的所有動畫(包括運行的和沒運行的),也是也tweenlite的默認模式,被覆蓋的動畫會保持覆蓋那一刻的現狀
AUTO(2)
當動畫開始運行時(即不包括延遲或暫停之類的)覆蓋,且只會覆蓋同一物體上的正在運行的動畫中的有重疊的動畫屬性。是TweenMax、TimelineLite、TimelineMax的默認覆蓋模式
CONCURRENT(3)
當動畫開始運行時覆蓋,會覆蓋同一物體上正在運行的所有動畫
ALL_ONSTART(4)
當動畫開始運行時覆蓋,會覆蓋同一物體上的所有動畫(包括運行的和沒運行的)
PREEXISTING(5)
當動畫開始運行時覆蓋,會覆蓋同一物體上在本動畫之前創建的所有動畫(包括運行的和沒運行的)
可以使用 OverwriteManager.init(OverwriteManager.AUTO); 來給所有動畫定義覆蓋方式,
如果想給不同動畫定義不同覆蓋方式,則在具體的 vars 對象中定義
2、3、4、5 類型都需要導入 OverwriteManager 類
TweenMax
TweenMax 的 vars 對象支持的屬性
delay:Number
在開始動畫前要等待的時間,單位為秒(或幀數)
useFrames:Boolean
如果設為true則動畫模式是基於幀的,否則是基於時間的(指的是動畫函數中要指定時間的地方)
ease:Function
緩動函數,默認為Quad.easeOut
easeParams:Array
緩動函數的參數,以數組形式傳入,注意只是有些緩動函數才需要需要參數的
immediateRender:Boolean
當值為false時,
overwrite:int
用來控制同一個對象上有多個動畫時的覆蓋之類的情況,tweenlite只有1和2這兩種情況可選,具體請見OverwriteManager
onInit:Function
當動畫開始渲染(或是說開始運行時)前要執行的函數
onInitParams:Array
onInit函數的參數,以數組形式傳入
onStart:Function
當動畫開始渲染時要執行的函數,有可能會被執行多次,因為動畫時可以重復開始的
onStartParams:Array
onStart函數的參數,以數組形式傳入
onUpdate:Function
當每一次動畫屬性值發生變化時調用的函數
onUpdateParams:Array
onUpdate函數的參數,以數組形式傳入
onComplete:Function
當動畫執行完畢後要調用的函數
onCompleteParams:Array
onComplete函數的參數,以數組形式傳入
onReverseComplete:Function
當一個動畫被反轉後又回到了原點時調用的函數
onReverseComplete:Array
onReverseComplete函數的參數,以數組形式傳入
onRepeat:Function
當每次動畫重新執行時要調用的函數
onRepeatParams:Array
onRepeat函數的參數,以數組形式傳入
paused:Boolean
當值為真時,動畫將會暫停播放
reversed:Boolean
當值為真時,動畫將會倒退播放,注意必須設置currentProgress為1或currentTime為動畫持續時間,倒退播放才起作用
repeat:int
設定動畫的循環播放次數,要想無限循環請使用-1。循環的次數不包括動畫的第一次播放
repeatDelay:Number
設定動畫每一次循環之間的間隔時間(或是幀),單位為妙
yoyo:Boolean
當值為真時,動畫循環的方式為: 向前播放-向後播放-向前播放,而如果yoyo為假的時候,循環的方式為:向前播放-回到原點向前播放。向後播放也會被算作一次循環。
startAt:Object
設定動畫的各種初始屬性,以對象方式來寫
TweenMax 實例屬性
currentProgress:Number[讀寫]
用來讀取或設置動畫的當前進程,0表示開始,0.5表示一半,1表示結束,
totalProgress:Number[讀寫]
用來讀取或設置動畫的當前進程,0表示開始,0.5表示一半,1表示結束,可讀可寫,與currentProgress不同的是,該屬性是相對於動畫整體而言的,即動畫如果設置了循環,那循環的部分也會算在內
currentTime:Number[寫]
用來設置動畫的當前時間,以秒(或幀)為單位,只可寫。
totalTime:Number [寫]
用來設置動畫的當前時間,以秒(或幀)為單位,只可寫。該屬性會把循環也算在內
repeat:int[寫]
用來設置動畫重復(或者說循環)次數,當設為-1時為無限循環
repeatDelay:Number[讀寫]
動畫每次循環間隔的秒數(或幀數)
yoyo:Boolean
與循環配合使用,當值為真時,循環模式為來回,即1-2-3,3-2-1,1-2-3, 當值為假時,循環模式為單向循環,即1-2-3,1-2-3,1-2-3
timeScale:Number[讀寫]
用來讀取或設置該實例動畫的回放速率,例如1為正常速度,0.5為一半速度,2為2倍速度
totalDuration:Number[讀寫]
用來設置或讀取動畫的持續秒數(或幀數),包括了所有循環、循環間隔所用的時間。
duration:Number[讀寫]
用來設置或讀取動畫執行一次的持續秒數(或幀數),即不包括循環、循環間隔的時間。
TweenMax 實例方法
1 | complete( skipRender:Boolean = false, suppressEvents:Boolean = false ):void |
說明:用來立刻完成動畫
參數:
skipRender:設為true的時候動畫屬性會停留在目前狀態,為false時會設為最終狀態
suppressEvents:當為true時,onComplete, onUpdate, onReverseComplete等事件不會觸發
1 | killProperties( names:Array ):void |
說明:用來刪除某個動畫中的動畫屬性,並且被刪除的動畫屬性不會被設為最終狀態
參數:names:要刪除的動畫屬性,以數組形式傳入,如[“x”,”y”]
1 | updateTo( vars:Object, resetDuration:Boolean = false ):void |
說明:用來在動畫創建後(或正在運行中)改變它的vars對象,如果使用了該方法,那麼當 resetDuration為真且動畫沒在運行當中的時候會重新啟動動畫
參數:
vars:要改變的屬性
resetDuration:為真且動畫沒在運行的時候會重啟動畫,如果為假則不會重啟動畫
TweenMax 靜態屬性/方法
1 | globalTimeScale:Number[讀寫] |
用來讀取或設置所有動畫的回放速率,例如1為正常速度,0.5為一半速度,2為2倍速度,能取的最小值為0.0001
1 | killTweensOf() |
移除所有動畫,並會把各種動畫屬性都設置到最終狀態,無參數
1 | to( target:Object, duration:Number, vars:Object ):TweenMax |
說明:與 TweenLite.to() 用法相同,不過功能有所增加,體現在 vars 的屬性上
1 | from( target:Object, duration:Number, vars:Object ):TweenMax |
說明:與 TweenLite.from() 用法相同,不過功能有所增加,體現在 vars 的屬性上
1 | fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ):TweenMax |
說明:與 to()、from() 用法差不多,只不過是從指定動畫屬性到指定動畫屬性,fromVars 對象裡只寫初始化的要進行動畫的屬性,
其他的諸如 delay、onUpdate 等屬性只能寫在 toVars 對象裡。
1 | allTo( targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null ):Array |
說明:與to()用法差不多。不過這個函數能驅動多個顯示對象。
參數:
targets:要進行動畫的顯示對象,可以有多個,以數組形式傳入
duration:動畫持續的秒數(或幀數)
vars:設置動畫的一些屬性及其他參數
stagger:每個顯示對象間的動畫開始間隔秒數
onCompleteAll:當所有顯示對象都完成動畫後要調用的函數
onCompleteAllParams: onCompleteAll 函數的參數,以數組形式傳入
1 | allFrom( targets:Array, duration:Number, vars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null ):Array |
說明:與 allTo() 用法相同
1 | allFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number = 0, onCompleteAll:Function = null, onCompleteAllParams:Array = null ):Array |
說明:與 fromTo() 功能相同,只不過能驅動多個顯示對象做動畫,用法與 allTo()、allFrom() 相同
1 | delayedCall( delay:Number, onComplete:Function, onCompleteParams:Array = null, useFrames:Boolean = false ):TweenMax |
說明:用於在一定時間(或幀數)後調用一個函數
參數:
delay:要延遲的秒數(或幀數)
onComplete:要延遲執行的函數
onCompleteParams: onComplete的參數,以數組形式傳入
useFrame:設定延遲的時間模式是基於秒數還是幀數
1 | getAllTweens() |
說明:獲取所有還沒完成的動畫實例,已經完成了的動畫不會獲取到。當autoRemoveChildren屬性設為真的時候,已經完成的動畫就不會再存在於時間軸上了
1 | getTweensOf( target:Object ):Array |
說明:用來獲取某個物體上的所有TweenLiteTweenMax對象
參數:target:目標物體
1 | isTweening( target:object ):Boolean |
說明:用來偵測某個物體是否在進行動畫
參數:target:要偵測的物體
1 | killAll( complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true ):void |
說明:用來消除所有的動畫和/或延遲函數
參數:
complete:當為真時在動畫或延遲函數消除前會完成執行
tweens:當為真時,會保留動畫
delayedCalls:當為真時會保留延遲函數
1 | killChildTweensOf( parent:DisplayObjectContainer, complete:Boolean = false ):void |
說明: 用來消除一個顯示對象容器內的所有子對象的動畫
參數:
parent:目標顯示對象容器
complete:在動畫消除前是否強制動畫執行完
1 | pauseAll( tweens:Boolean = true, delayedCalls:Boolean = true ):void |
說明:用來暫停所有動畫或延遲函數
參數:
tweens:如果為真則所有動畫都會暫停
delayedCalls:如果為真則所有延遲函數都會暫停
1 | resumeAll( tweens:Boolean = true, delayedCalls:Boolean = true ):void |
說明:用來繼續所有暫停了的動畫和延遲函數
參數:
tweens:如果為真,所有暫停的動畫都會繼續
delayedCalls:如果為真,所有暫停的延遲函數都會繼續
TimelineLite
TimelineLite 是一個輕量級的、簡單易用的時間軸類,可以用來建立和管理 TweenLite、TweenMax、TimelineLite、TimelineMax 等實例組成的隊列。你可以想象,一個 TimelineLite 實例就像是一個虛擬的影片剪輯時間軸或是一個你可以在掌控時間的基礎上在裡面放置任何動畫或 Timeline 的容器。
TimelineLite 實例屬性
1 | currentProgress:Number[讀寫] |
用來設置或讀取動畫的進程度,例如 0 表示開始,0.5 表示一半,1 表示完成。
totalProgress 在 TimelineLite 中與 currentProgress 含義相同,但在 TimelineMax 中,totalProgress 會把循環以及循環間隔包括在內。
1 | duration:Number[讀寫] |
用來設置或讀取 Timeline 持續的秒數(或幀數)
1 | timeScale:Number[讀寫] |
用來設置或讀取時間軸的回放速率,比如 0.5 為一半速率,1 為正常速度,2 為 2 倍速度
1 | totalDuration:Number[讀寫] |
用來設置或讀取總的持續時間(或幀數),包括循環和循環間隔的時間
1 | useFrame:Boolean[讀] |
是否啟用幀模式
TimelineLite 實例方法
1 | TimelineLite( vars:Object = null ) |
TimelineLite 類的構造函數。傳入一個 vars 對象作為參數
1 | append( tween:TweenCore, offset:Number = 0 ):TweenCore |
說明:在時間軸的末端添加一個 TweenLite、TweenMax、TimelineLite、TimelineMax 動畫實例
參數:
tween: 要添加的 TweenLite、TweenMax、TimelineLite、TimelineMax 動畫實例
offset: 相對於時間軸末端要偏移的秒數(或幀數),例如如果你想要添加的本段動畫跟原本時間軸上的最後一段動畫有3秒的間距,那你可以把這個參數設為 3,又例如你想要添加的本段動畫跟原本時間軸上的最後一段動畫有 2 秒的重疊,那你可以把這個參數設為-2.
該方法返回的是添加進去的動畫實例
1 | insert( tween:TweenCore, timeOrLabel:* = 0 ):TweenCore |
說明:在指定的時間、幀或標簽中插入一個TweenLite、TweenMax、TimelineLite、TimelineMax動畫實例
參數:
tween: 要插入的 TweenLite、TweenMax、TimelineLite、TimelineMax 動畫實例
timeOrLabel:指定插入動畫的時間點,可以是秒數(或幀數),和標簽(以字符串表示)
該方法返回的是插入進去的動畫實例
1 | appendMultiple( tweens:Array, offset:Number = 0, align:String = "normal", stagger:Number = 0 ):Array |
說明:可以一次添加多個TweenLite、TweenMax、TimelineLite、TimelineMax動畫實例到時間軸的末端。
參數:
tweens:一個包括了要添加的動畫實例的數組
offset:相對於時間軸末端要偏移的秒數(或幀數)
align:添加的動畫的排列模式,因為添加進去的有多個動畫,所以要決定它們是如何排列的,有三中模式可選:
TweenAlign.SEQUENCE:添加的動畫會根據先後順序一個接一個的依次排列;
TweenAlign.START:把添加的所有動畫重疊在一起,並且會忽略它們的delay;
TweenAlign.NORMAL:把所有添加的動畫重疊在一起,並且不會忽略它們的delay。
stagger:添加進去的每個動畫之間運行的時間間距,單位為秒
該方法返回的是添加進去的動畫實例數組
1 | insertMultiple( tweens:Array, timeOrLabel:String = "0", align:Number = normal, stagger:* = 0 ):Array |
說明:一次性向指定的時間、幀數或標簽插入多個 TweenLite、TweenMax、TimelineLite、TimelineMax 動畫實例,用法與 appendMultiple 相同,就不再累述
1 | prepend( tween:TweenCore, adjustLabels:Boolean = false ):TweenCore |
說明:在時間軸的開始處插入一個TweenLite、TweenMax、TimelineLite、TimelineMax動畫實例,它會把後面的動畫向後擠走
參數:
tween:要插入的動畫實例
adjustLabels:如果為true,那麼時間軸上標簽也會跟著被擠走的動畫往後挪
該方法返回插入的動畫實例
1 | prependMultiple( tweens:Array, align:String = "normal", stagger:Number = 0, adjustLabels:Boolean = false ):Array |
說明:一次性的在時間軸的開始處插入多個TweenLite、TweenMax、TimelineLite、TimelineMax動畫實例,它會把後面的動畫向後擠走。用法與appenfMultiple等相同
1 | addLable( label:String, time:Number ):void |
說明:在時間軸上添加一個幀標簽,以後gotoAndStop() gotoAndPlay()就可使直接使用這個標簽作為參數了
參數:
label:標簽名稱
time:指明要在哪個時間點(或幀數)上增加標簽,單位為秒
1 | removeLable( label:String ):Number |
說明:從時間軸上移除一個標簽,並返回這個標簽的時間點
參數:lable:要移除的標簽名稱
1 | goto( timeOrLabel:*, suppressEvents:Boolean = true ):void |
說明:相當於把播放頭跳轉到特定的時間點(或幀數)或標簽,而且不會改變時間軸的暫停狀態
參數 :
timeOrLable:要跳轉到的秒數(或幀數)或標簽
suppressEvents:如果為 true,則播放頭到達任何位置都不引起 onComplete、onUpdate 等事件的觸發
1 | gotoAndPlay( timeOrLabel:*, suppressEvents:Boolean = true ):void |
說明:把播放頭跳轉到指定的地方並從那裡播放
參數:
timeOrLable:要跳轉到的秒數(或幀數)或標簽
suppressEvents:如果為true,則播放頭到達任何位置都不引起onComplete、onUpdate等事件的觸發
1 | gotoAndStop( timeOrLabel:*, suppressEvents:Boolean = true ):void |
說明:把播放頭跳轉到指定的地方並暫停時間軸
參數:
timeOrLable:要跳轉到的秒數(或幀數)或標簽
suppressEvents:如果為true,則播放頭到達任何位置都不引起onComplete、onUpdate等事件的觸發
1 | stop():void |
說明:暫停動畫,應該不是停止
1 | getChildren( nested:Boolean = true, tweens:Boolean = true, timelines:Boolean = true, ignoreBeforeTime:Number = -9999999999 ):Array |
說明:可以獲取時間軸內的所有動畫和時間軸實例,包括嵌套的
參數:
nested:如果為true,則嵌套的動畫實例或時間軸實例也會包括在內,否則只會包括最頂層的
tweens:如果為true,則會包括動畫實例
timelines:如果為true,則會包括時間軸實例
ignoreBeforeTime: 開始時間少於這個數的動畫或時間軸是例會被忽略
1 | getLableTime( label:String ):Number |
說明:返回標簽的時間點,如果標簽不存在則返回-1
參數:lable:目標標簽名稱
1 | getTweensOf( target:Object, nested:Boolean = true ):Array |
說明: 返回特定物體上的動畫實例
參數:
target: 目標物體
nested: 如果為 true,則動畫中嵌套的時間軸實例也會返回
1 | killTweensOf( target:Object, nested:Boolean = true, vars:Object = null ):Boolean |
說明:刪除某個物體上的一個或多個動畫
參數:
target:目標物體
nested:是否影響到嵌套的動畫
vars:指明要刪除的動畫屬性,如{alpha:true,x:true},如果省略該參數,則所有動畫屬性都會刪除
1 | remove( tween:TweenCore, skipDisable:Boolean = false ):void |
說明:從時間軸上移除一個TweenLite, TweenMax, TimelineLite, or TimelineMax實例
參數:
tween:要移除的TweenLite, TweenMax, TimelineLite, or TimelineMax實例
skipDisable:一般不要去改變,保留它的默認值即可,是什麼意義我也看不明白
1 | clear( tweens:Array = null ):void |
說明:用來清空時間軸上的所有動畫和時間軸實例,如果傳入一個數組參數,則可以刪除特定的動畫
參數:tweens:要刪除的動畫組成的數組
1 | shiftChildren( amount:Number, adjustLabels:Boolean = false, ignoreBeforeTime:Number = 0 ):void |
說明:把時間軸中的所有動畫的開始時間向後推一定的時間,以留出一定的空間
參數:
amount:要延長的秒數(或幀數)
adjustLabels:如果true則時間軸上的lable也會相應調整
ignoreBeforeTime:所有在這個在這個時間或這個時間之後開始的動畫的開始時間都會向後推
1 | invalidate() |