GSAP（Green Sock Animation Platform）是一個十分好用的js動畫庫，據說是as的精簡版

以下是學習GSAP的一些筆記：貌似中文的文檔不是很多

GSAP notes:

tl.to(obj,2,{x:100,y:100}); //添加動畫片段到時間軸
tl.to([obj1,obj2,obj3],2,{alpha:0.5,y:100}); //多個對象執行相同動畫？ 添加動畫片段
tl.from(); "從"動畫片段
tl.fromTo(); "從-到"動畫片段

var tween = new TweenLite(myObject, 2, {x:100, y:200});//創建一個動畫片段

or even:

var tween = TweenLite.to(myObject, 2, {x:100, y:200}); //返回一個動畫片段并賦值給變量 供以后調用

TweenLite.to(obj,2,{x:100,y:100});//返回一個動畫片段對象 但無保存它的引用

------------------------------------------------

TweenLite.to(mc, 1, {x:100});//無延時 會馬上執行的動畫片段。
TweenLite.to(mc, 1, {y:50, delay:1});//延時1秒執行該動畫片段 動畫播放1秒
TweenLite.to(mc, 1, {alpha:0, delay:2});//延時2秒執行該動畫片段 ~~形成連續的動畫序列

var tl = new TimelineLite(); //創建時間軸 時間軸用于動畫片段的組織和管理
tl.add( TweenLite.to(mc, 1, {x:100}) ); //往時間軸添加動畫片段。
tl.add( TweenLite.to(mc, 1, {y:50}) );
tl.add( TweenLite.to(mc, 1, {alpha:0}) );

//then later, control the whole thing...
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();

var tl = new TimelineLite();
tl.to(mc, 1, {x:100}).to(mc, 1, {y:50}).to(mc, 1, {alpha:0}); //簡寫 tl.add( TweenLite.to(mc, 1, {alpha:0}) );

//create the timeline with an onComplete callback that calls myFunction() when the timeline completes
var tl = new TimelineLite({onComplete:myFunction});
//add a tween
tl.add( new TweenLite(mc, 1, {x:200, y:100}) );

//add another tween at the end of the timeline (makes sequencing easy)
tl.add( new TweenLite(mc, 0.5, {alpha:0}) );

//append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds
tl.to(mc, 1, {rotation:30}, "+=0.5");

//reverse anytime
tl.reverse();
//Add a "spin" label 3-seconds into the timeline
tl.add("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(mc, 2, {rotation:"360"}), "spin");

//go to the "spin" label and play the timeline from there
tl.play("spin");
//nest another TimelineLite inside your timeline...
var nested = new TimelineLite();
nested.to(mc2, 1, {x:200}));
tl.add(nested);

/* ------- add() --------*/
//add a tween to the end of the timeline
tl.add( TweenLite.to(mc, 2, {x:100}) );
//add a callback at 1.5 seconds
tl.add(func, 1.5);
//add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
tl.add("myLabel", "+=2");
//add another timeline at "myLabel"
tl.add(otherTimeline, "myLabel");
//add an array of tweens 2 seconds after "myLabel"
tl.add([tween1, tween2, tween3], "myLabel+=2");
//add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);

============================================================================
tl = new TimelineLite();
tl.play();
tl.pause();
tl.resume();
tl.restart();
tl.reverse();

TweenLite.to(obj,2,{x:100,y:100}); //馬上執行的動畫片段
TweenLite.to(obj,2,{x:100,y:100, delay:2}); //延時2秒執行
TweenLite.to([obj1,obj2,obj3],3,{alpha:0.5,y:100}); //多個對象執行相同動畫片段

TweenLite.from(); //參考to();
TweenLite.fromTo();//參考to();

var tween = new TweenLite(myObject, 2, {x:100, y:200}); //創建動畫片段對象 并保存到變量中

or even:

var tween = TweenLite.to(myObject, 2, {x:100, y:200}); //執行動畫片段 返回動畫片段對象

TweenLite.to(obj, duration, oParams);
oParams={
cssProperty...
,delay:
,ease:
,easyParams:array
,onComplete:func
,onCompleteParams:array //[mc,"param2"] ["{self}","param2"]
,useFrames:true/false
,immediateRender:true/false //是否立即渲染動畫片段
,onStart:func
,onStartParams:array
,onUpdate:func
,onUpdateParams:array
,onReverseComplete:func
,onReverseCompleteParams:array
,paused:true/false //不馬上執行動畫片段
,overWrite:string/integer none|all|auto|concurrent|allOnStart|
}

TweenPlugin.activate(); //TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]);

TweenLite.to(mc, 2, {x:"-=20"}) //相對值

TweenLite.killTweensOf(myobject); //從對象上刪除綁定的動畫片段
You can kill all delayedCalls to a particular function using TweenLite.killDelayedCallsTo(myFunction); or TweenLite.killTweensOf(myFunction);

Tween對象的公共屬性(繼承的屬性)
var tween = TweenLite.to(obj, 1, {x:100, delay:1});
tween.target / tween.vars / tween.timeline ...

data:
defaultEase
defaultOverwrite
target
ticker
timeline
vars

Tween對象的公共方法
var tween = TweenLite.to(obj, 1, {x:100, delay:1});

tween.set(obj, vars); //設置元素樣式

TweenLite(target,duration,vars); //構造函數
tween.delay(3) /

delay(number); //延時執行動畫
delayedCall(delay:number, callback:fn,params:array,useFrames:boolean); //靜態方法 TweenLite.delayedCall(); 延時執行函數

duration(number); //獲取或設置動畫片段時長

eventCallback(eventType,callback,params); //獲取或設置事件處理函數

from(obj,duration,vars); //靜態方法

fromTo(obj,duration,vars); //靜態方法

getTweensOf(target, onlyActive); //靜態方法 返回tweens 數組

invalidate(); //清除初始化數據

isActive(); //是否活動的動畫片段

總結

以上是生活随笔為你收集整理的GSAP学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。