# GreenSock中的TweenMax
###### tags: greenSock tags:tweenMax
>自己寫一些常用到的，方便日後查詢
### **介紹**
greenSock 是功能強大的JS動畫涵式庫,官網上有詳細的[API說明](http://greensock.com/docs/#/HTML5/GSAP/),此篇先介紹[TweenMax](https://www.tweenmax.com.cn/)的補間動畫使用。
---
### **TweenMax()**
用來建構TweenMax的函數,可實例化作使用,也可存於變數中使用。
TweenMax(目標, 作用秒數, 作用屬性), 若是使用TweenLite就是TweenLite()。
```
let TweenTarget = new TweenMax( target:Object, duration:Number, vars:Object )
let TweenTarget2 = new TweenLite( target:Object, duration:Number, vars:Object )
```
### **作用屬性,參數部分介紹**
* delay: '延遲時間(s)，在此動畫應該開始前計算delay秒數',
* ease: '動畫運行曲線',
* repeat: '重複的次數，不包含第一次',
* yoyo: '(T/F)動畫再重複時，是否會來回執行，而不是從頭開始',
* yoyoEase: '設定repeat，從尾到頭時，動畫的運行曲線，同上 ease屬性',
* paused: '(T/F)為ture，對象在create後就會停止',
* overwrite: '要不要發生覆寫這件事，如果是“none”就是不發生、”all“就是發生'
* onComplete(function): '當動畫結束時，會執行的函式'
* onCompleteParams(Array): '帶入onComplete的參數，用'{self}'可拿到本身 tween實例'
* lazy: '預設true，這是為了解決效能的問題，預設會先讀完所有的動畫後再執行' 參考：https://www.youtube.com/embed/TMHJptqnDpU?vq=hd720
---
### **作用屬性給予動畫事件**
基本上除了本身事件外,也能傳入數組,設定作用範圍
on__: 作用事件, on___Params: Array 傳遞給on__的參數數組, on___Scope:obj 定義給on___的作用區
* onComplete: 動畫完成結束後回調此函數
* onReverseComplete: 動畫完成後回調慘函數且反向撥放
* onStart: 動畫開始渲染時作用事件
* onUpdate: 動畫發生改變時(每一針)不停觸發
* onOverwrite: fun(被覆蓋的動畫, 覆蓋的動畫, 目標, 屬性數組)
* onRepeat: 動畫每次重複執行時, 執行此事件
* .eventCallback(type: string, callBack: function(), params:[], scope:) 獲取或設定事件(上方所有事件皆可使用), 和傳給此函數的參數
---
### 基本動畫結構 TweenMax.__ (與TweenLite通用)
TweenMax.動作(目標: object,秒數: number,作用屬性: object)
* to: 到目標位置
```
TweenMax.to(target, 0.5, { x: 0 });
// 多個屬性可設為:
TweenMax.to([target1, target2], 1, { x: 0 });
```
* form: 從目標位置而來, 就是動畫設置開始點
* formTo: 設置動畫起始點和結束點
```
TweenMax.form(target, 0.5, { x: 0 });
// formTo(...{起點}, {終點})
TweenMax.formTo(target, 0.5, { x: 0 }, { x: 900 });
```
* set: 設置該目標的屬性不用給予時間(可用於不想改變位置但想改變外貌..等等)
```
TweenMax.set(target,{ rotation:360 });
// 相當於0秒的動畫
TweenMax.to(target, 0, { rotation:360 });
```
官方文件上有介紹使用set做出3D效果, 但在egret上似乎實現不了, 有興趣者可上去看看[使用](https://www.tweenmax.com.cn/api/tweenmax/TweenMax.set())。
* stagger: 可設定一個有間隔的動畫數列,等同於多個TweenMax(TweenMax才能使用)
同樣能使用To/From
```
** TweenMax.staggerTo/Form(目標, 時間, {起點}, 間隔數值, 完成後函數, 傳入回傳函數數組, 函數作用範圍) */
TweenMax.staggerTo([target1,target2,target3], 2, { rotation: 360, x: 902, y: 315, scaleX: 0.5, scaleY: 0.5 }, 0.1);
```
* staggerFormTo:設定序列動畫的起點與終點 :
能使用cycle屬性。
cycle(obj): 可自訂使用不同的屬性組, 也可使用function. 亂數..等等, 亦可使用上方的staggerTo/Form..等
```
var objects = [obj1, obj2, obj3, obj4, obj5];
TweenMax.staggerFromTo(objects, 作用時間, {起點屬性}, {終點屬性}, 0.2);
// cycle: 通過function返回屬性數組
TweenMax.staggerFromTo(objects, 1, {cycle:{屬性}}, {終點屬性}, 0.2);
```
* delayedCall: 設定時間(幀數)後調用函數的方法
```
/** TweenMax.delayedCall(延遲秒數, 執行函數, 回傳參數[], scope作用區域, 延遲為秒數還是幀數:預設false為 秒)
TweenMax.delayedCall(4, Back)
function Back() { TweenMax.staggerTo(target[], 1, {屬性}, 0.4) };
```
---
### 播放組件
播放組件基本上為:
function(秒數/狀態, 是否保持默認值屬性,若是true在作用期間內會停止函數操作、事件等)
* 播放: play(於第幾秒時間點播放, ..)
* 暫停: pause(跳轉到第幾秒並停止,..)
```
開關 ? TweenMaxTarget.play() : TweenMaxTarget.pause();
```
* 暫停狀態: paused(給予暫停狀態: boolean)
```
// TweenMaxTarget.paused(false / true) 亦可達到簡單的播放和暫停
開關 ? TweenMaxTarget.paused(true) : TweenMaxTarget.paused(false);
```
* 重新開始: restart(是否重新開始, ..)
給予true會略過delay屬性
```
option ? TweenMaxTarget.restart() : TweenMaxTarget.restart(true);
```
* 繼續: resume(第幾秒繼續)
```
TweenMaxTarget.pause() // 暫停
TweenMaxTarget.resume() // 繼續
TweenMaxTarget.resume(3) // 於3秒時繼續開始
```
* 倒轉播放: reverse(第幾秒反轉撥放, ..)
所有動畫皆會反轉, ease曲線也是EX: easeIn -> easeOut
reverse(0) 在動畫最後反方向撥放 reverse(-1) 倒數1秒反方向撥放
```
TweenMaxTarget.reverse()
```
* 倒轉播放狀態: reversed()
和前者paused()一樣, 可以取得倒轉狀態,設置(true)為反方向
```
// 正常播放與反方向播放
開關 ? TweenMaxTarget.play() : TweenMaxTarget.reversed( !TweenMaxTarget.reversed(); );
```
* 直接跳轉到某時間點: seek(跳轉目標秒數,是否阻止事件或回調函數)
不改變狀態(播放/暫停/方向)的形況下直接跳轉到某時間點
阻止事件預設為true。
```
TweenMaxTarget.seek(3) // 直接跳到3秒
TweenMaxTarget.seek(3,false) // 直接跳到3秒, 且不阻止期間內的函數與事件
```
* 設定速率: timeScale(速率:number)
設定動畫播放速度, 默認為1
和egret中的timeScale一模模一樣樣
```
TweenMaxTarget.timeScale(3) // 3倍速
TweenMaxTarget.timeScale(0.5) // 0.5倍速
```
---
### **動畫屬性調整(無入參時為獲取)**
* .duration( value:Number ) 單次動畫持續的時間
* .totalDuration( value:Number ) 全部重複動畫加重複間隔的持續時間
* .time( value:Number ) 當前動畫已用時間
* .totalTime( time:Number, suppressEvents:Boolean ) 全部重複動畫加重複間隔的總時間
* .progress( value:Number, suppressEvents:Boolean ) 進程0~1
* .totalProgress( value:Number, suppressEvents:Boolean ) 總進程0~1
* .delay( value:Number )獲取或者設置動畫的開始延遲秒數
* .invalidate() 刷新開始/結束值,此時如再restart()會以當前位置作為新的開始點
* .isActive() 判斷是否在播放中
* .startTime( value:Number ) / .endTime( value:Number )
* .repeat( value:Number ) 第一次完成後的重複次數
* .repeatDelay( value:Number )
* .yoyo( value:Boolean )獲取或設置補間動畫的yoyo的狀態。
---
### **實例屬性(除data和ticker外均僅用於獲取數據)**
* data 用於儲存信息
myTween.data={data1:'value1',data2:'value2',} //存取
myTween.data.data1 // 獲得value1
* target 動畫對象
* timeline 父級時間軸對象
* vars 構造器配置對象
* ticker 每當引擎update時這個對象將分配tick事件
[官方文件上有詳細介紹](https://www.tweenmax.com.cn/api/tweenmax/TweenMax.ticker)記得打開F12
---
### **實例方法**
* TweenMax.getTweensOf( target:Object, onlyActive:Boolean )獲取目標上所有動畫對象的數組
* TweenMax.getAllTweens( includeTimelines:Boolean ) 獲取所有動畫實例的數組
* .kill( vars:Object, target:Object ) 消滅整個動畫或部分參數。
```
//刪除動畫
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]);
```
* TweenMax.killDelayedCallsTo( function:Function ) 移除延遲函數
* TweenMax.killTweensOf( target:Object, vars:Object ) 移除目標所有動畫
* TweenMax.killAll(complete, tweens, delayedCalls, timelines) 全部刪除
* TweenMax.killChildTweensOf( parent:Object, complete:Boolean )刪除目標子元素動畫
* TweenMax.globalTimeScale( value:Number ) 讀取或設置所有動畫全局播放速率
* TweenMax.pauseAll( tweens, delayedCalls, timelines ) 全部暫停
* TweenMax.resumeAll( tweens, delayedCalls, timelines )全部恢復
Sign in with Wallet
Connect another wallet