GSAP学习笔记

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秒执行该动画片段 ~~形成连续的动画序列

//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(); //是否活动的动画片段

相关文章