GreenSock中的TweenMax

tags: greenSock tags:tweenMax

自己寫一些常用到的，方便日後查詢

介紹

greenSock 是功能強大的JS動畫涵式庫,官網上有詳細的API說明,此篇先介紹TweenMax的補間動畫使用。

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上似乎實現不了, 有興趣者可上去看看使用。

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事件
官方文件上有詳細介紹記得打開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 )全部恢復

GreenSock中的TweenMax

tags: greenSock tags:tweenMax

介紹

TweenMax()

作用屬性,參數部分介紹

作用屬性給予動畫事件

基本動畫結構 TweenMax.__ (與TweenLite通用)

播放組件

動畫屬性調整(無入參時為獲取)

實例屬性(除data和ticker外均僅用於獲取數據)

實例方法

Read more

前端工程師 javascript 面試

Typescript 泛型

TypeScript異步使用

數值%數顯示計算