GreenSock Animation Platform
Tweenlite 的缘来:
shakeEffect:http://www.ghugo.com/wp-content/uploads/2013/09/ShakeEffektSample.swf
什么是GSAP?
http://greensock.com/get-started-js
DrawSVGPlugin
bezierTween
Transform
TweenLite
1) GSAP平台所高度优化的性能，动画测试工具：http://www.greensock.com/js/speed.html
2) 强大的功能集
涉及reverse() / pause() / resume() /
3) 排序，分组以及管理功能.。play() / pause() / restart() / reverse / time() / progress() /
这些方法可以彻底改变你的动画工作流程，使其更加模块化和简洁。
使用简单的方式创建复杂的补间动画序列或团体 以整体控制一个动画。
4) 易于使用 设计者与开发人员都可使用
5) 支持和可靠性 GreenSock 论坛 http://greensock.com/forums/
6）高扩展性 在其驾构基础上衍生了丰富多样的插件，合理应用插件，最大限度地减少膨胀和最大限度地提高性能。
视频 GreenSock 衍生于Flash http://embed.wistia.com/deliveries/9a34d14358421334d4cc0ec2fcf3a2055ffe0c48/file.mp4
如何使用呢?
最常用的方法是 TweenLite.to 示例：
Examples:
var photo = document.getElementById("photo");TweenLite.to(photo,2,{width:"200px", height:"150px"});
扩展： CSSPlugin selector:可以自由定义为
TweenLite.to("#myID", 1, {left:"100px"}) 或者
document.querySelectorAll() 或者 document.getElementById()
甚至 自定义 TweenLite.selector = YOUR_SELECTOR_ENGINE;
Examples:
//tween the element with ID of "myID"TweenLite.to("#myID",2,{backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});//or if jQuery is loaded, you can do more advanced selecting like all the elements with the class "myClass" like this: TweenLite.to(".myClass",2,{boxShadow:"0px 0px 20px red", color:"#FC0"});
当目标对象为一个数组时，
Examples:
TweenLite.to([obj1, obj2, obj3],1,{opacity:0.5, rotation:45});
delay: 延时 :: Number
ease: 缓动 :: Ease (or Function or String)
immediateRender : 即时渲染 :: Boolean
overwrite ：覆盖 :: String (or integer)
onComplete: 完成时回调 :: Function
onCompleteParams :完成时回调函数参数 :: Array
onReverseComplete ：动画倒播完成时回调 :: Function
onReverseCompleteParams : 动画倒播完成时回调函数参数 :: Array
ex: TweenLite.to(element, 2, {css:{left:"200px", top:"100px"}, ease:Linear.easeNone});
Examples:
传送门：
Examples:
TweenLite.to(element,1,{css:{top:"100px", left:"50px", backgroundColor:"#ff0000", fontSize:"12px"}, delay:0.5});
1). TweenLite.to(element, 2, {left:"-=20px"});
2). TweenLite.defaultEase
3). TweenLite.killTweensOf(myObject)
TweenLite.killTweensOf("#myID")
4). TweenLite.killDelayedCallsTo(myFunction);
TweenLite.killTweensOf(myFunction);
TweenLite.defaultOverwrite :String = "auto"
TweenLite.selector :*= document.getElementById()
target :Object
TweenLite.ticker : Object
Public Methods
delay : ( value:Number )
TweenLite.delayedCall
( delay:Number, callback:Function, params:Array , scope:*, useFrames:Boolean )
duration ( value:Number )
endTime ( includeRepeats:Boolean ) : Number
eventCallback ( type:String, callback:Function, params:Array, scope:* )
TweenLite.from ( target:Object, duration:Number, vars:Object ) : TweenLite
TweenLite.getTweensOf ( target:*, onlyActive:Boolean ) : Array
isActive ( ) : Boolean
kill ( vars:Object, target:Object ) : *
TweenLite.killDelayedCallsTo ( func:Function ) :
TweenLite.killTweensOf ( target:Object, onlyActive:Boolean, vars:Object ) :
TweenLite.lagSmoothing ( threshold:Number, adjustedLag:Number ) :
pause ( atTime:*, suppressEvents:Boolean ) : *
paused ( value:Boolean ) : *
play ( from:*, suppressEvents:Boolean ) : *
progress ( value:Number [0 , 1], suppressEvents:Boolean ) : *
TweenLite.render ( ) :
restart ( includeDelay:Boolean, suppressEvents:Boolean ) : *
resume ( from:*, suppressEvents:Boolean ) : *
reverse ( from:*, suppressEvents:Boolean ) : *
reversed ( value:Boolean ) : *
seek ( time:*, suppressEvents:Boolean ) : *
TweenLite.set ( target:Object, vars:Object ) : TweenLite
startTime ( value:Number ) : *
time ( value:Number, suppressEvents:Boolean ) : *
timeScale ( value:Number ) : *
TweenLite.to ( target:Object, duration:Number, vars:Object ) : TweenLite
totalDuration ( value:Number ) : *
totalProgress ( value:Number, suppressEvents:Boolean ) : *
totalTime ( time:Number, suppressEvents:Boolean ) : *
Public Properties
Public Methods
delay ( value:Number ) : *
duration ( value:Number ) : *
eventCallback ( type:String, callback:Function, params:Array, scope:* ) : *
invalidate ( ) : *
isActive ( ) : Boolean
kill ( vars:Object, target:Object ) : *
pause ( atTime:*, suppressEvents:Boolean ) : *
play ( from:*, suppressEvents:Boolean ) : *
progress ( value:Number, suppressEvents:Boolean ) : *
restart ( includeDelay:Boolean, suppressEvents:Boolean ) : *
resume ( from:*, suppressEvents:Boolean ) : *
reverse ( from:*, suppressEvents:Boolean ) : *
reversed ( value:Boolean ) : *
seek ( time:*, suppressEvents:Boolean ) : *
startTime ( value:Number ) : *
time ( value:Number, suppressEvents:Boolean ) : *
timeScale ( value:Number ) : *
totalDuration ( value:Number ) : *
totalProgress ( value:Number, suppressEvents:Boolean ) : *
totalTime ( time:Number, suppressEvents:Boolean ) : *
/*----------------------------*/
TweenMax
1) GSAP平台所高度优化的性能，动画测试工具：http://www.greensock.com/js/speed.html
2) 强大的功能集
3) 排序，分组和管理功能
4) JavaScript, AS3, and AS2
5) 易于使用 设计者与开发人员都可使用
6) 支持和可靠性 GreenSock 论坛 http://greensock.com/forums/
7）高扩展性 在其驾构基础上衍生了丰富多样的插件，合理应用插件，最大限度地减少膨胀和最大限度地提高性能。
Usage
var photo = document.getElementById("photo");TweenMax.to(photo,2,{width:"200px", height:"150px"});
//tween the element with ID of "myID"TweenMax.to("#myID",2,{backgroundColor:"#ff0000", width:"50%", top:"100px", ease:Power2.easeInOut});//or you can do more advanced selecting like all the elements with the class "myClass" like this: TweenMax.to(".myClass",2,{boxShadow:"0px 0px 20px red", color:"#FC0"});
TweenMax.to([obj1, obj2, obj3],1,{opacity:0.5, rotation:45});
TweenMax.from()delay : Number
ease : Ease
repeat :
repeatDelay :
yoyo :
paused :
overwrite :
onComplete :
immediateRender :
onCompleteParams :
onCompleteScope :
onRepeat :
onRepeatParams :
onRepeatScope :
onReverseComplete :
onReverseCompleteParams :
onReverseCompleteScope :
onStart :
onStartParams :
onStartScope :
onUpdate :
onUpdateParams :
onUpdateScope :
startAt :
useFrames :
lazy :
onOverwrite :
autoCSS :
Constructor
TweenMax ( target:Object, duration:Number, vars:Object );
Public Properties
data : *
TweenMax.selector : * = document.getElementById()
target : Object
TweenMax.ticker : Object
timeline : SimpleTimeline
vars : Object
Public Methods
delay ( value:Number ) : *
TweenMax.delayedCall ( delay:Number, callback:Function, params:Array, scope:*,
duration ( value:Number ) : *
endTime ( includeRepeats:Boolean ) : Number
eventCallback ( type:String, callback:Function, params:Array, scope:* ) : *
TweenMax.from ( target:Object, duration:Number, vars:Object ) : TweenMax
TweenMax.fromTo ( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenMax
TweenMax.getAllTweens ( includeTimelines:Boolean ) : Array
TweenMax.getTweensOf ( target:Object, onlyActive:Boolean ) :
invalidate ( ) : *
isActive ( ) : Boolean
TweenMax.isTweening ( target:Object ) : Boolean
kill ( vars:Object, target:Object ) : *
TweenMax.killAll ( complete:Boolean, tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :
TweenMax.killChildTweensOf ( parent:Object, complete:Boolean ) :
TweenMax.killDelayedCallsTo ( function:Function ) :
TweenMax.killTweensOf ( target:Object, vars:Object ) :
TweenMax.lagSmoothing ( threshold:Number, adjustedLag:Number ) :
pause ( atTime:*, suppressEvents:Boolean ) : *
TweenMax.pauseAll ( tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :
paused ( value:Boolean ) : *
progress ( value:Number, suppressEvents:Boolean ) : *
repeat ( value:Number ) : *
repeatDelay ( value:Number ) : *
restart ( includeDelay:Boolean, suppressEvents:Boolean ) : *
resume ( from:*, suppressEvents:Boolean ) : *
TweenMax.resumeAll ( tweens:Boolean, delayedCalls:Boolean, timelines:Boolean ) :
reverse ( from:*, suppressEvents:Boolean ) : *
reversed ( value:Boolean ) : *
seek ( time:*, suppressEvents:Boolean ) : *
TweenMax.set ( target:Object, vars:Object ) : TweenMax
TweenMax.staggerFrom ( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
TweenMax.staggerFromTo ( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
TweenMax.staggerTo ( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array
startTime ( value:Number ) : *
time ( value:Number, suppressEvents:Boolean ) : *
timeScale ( value:Number ) : *
TweenMax.to ( target:Object, duration:Number, vars:Object ) : TweenMax
totalDuration ( value:Number ) : *
totalProgress ( value:Number, suppressEvents:Boolean ) : *
totalTime ( time:Number, suppressEvents:Boolean ) : *
updateTo ( vars:object, resetDuration:Boolean ) : *
yoyo ( value:Boolean ) : *
Public Properties
autoRemoveChildren : Boolean
data : *
smoothChildTiming : Boolean
timeline : SimpleTimeline
Public Methods
add ( value:*, position:*, align:String, stagger:Number ) : *
addLabel ( label:String, position:* ) : *
addPause ( position:*, callback:Function, params:Array, scope:* ) : *
call ( callback:Function, params:Array, scope:*, position:* ) : *
clear ( labels:Boolean ) : *
delay ( value:Number ) : *
duration ( value:Number ) : *
endTime ( includeRepeats:Boolean ) : Number
eventCallback ( type:String, callback:Function, params:Array, scope:* ) : *
TimelineLite.exportRoot ( vars:Object, omitDelayedCalls:Boolean ) : TimelineLite
from ( target:Object, duration:Number, vars:Object, position:* ) : *
fromTo ( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* ) : *
getChildren ( nested:Boolean, tweens:Boolean, timelines:Boolean, ignoreBeforeTime:Number ) :
getLabelTime ( label:String ) : Number
getTweensOf ( target:Object, nested:Boolean ) : Array
invalidate ( ) : *
isActive ( ) : Boolean
kill ( vars:Object, target:Object ) : *
pause ( atTime:*, suppressEvents:Boolean ) : *
paused ( value:Boolean ) : *
play ( from:*, suppressEvents:Boolean ) : *
progress ( value:Number, suppressEvents:Boolean ) : *
recent ( ) : Animation
remove ( value:* ) : *
removeLabel ( label:String ) : *
render ( time:Number, suppressEvents:Boolean, force:Boolean ) :
restart ( includeDelay:Boolean, suppressEvents:Boolean ) : *
resume ( from:*, suppressEvents:Boolean ) : *
reverse ( from:*, suppressEvents:Boolean ) : *
reversed ( value:Boolean ) : *
seek ( position:*, suppressEvents:Boolean ) : *
set ( target:Object, vars:Object, position:* ) : *
shiftChildren ( amount:Number, adjustLabels:Boolean, ignoreBeforeTime:Number ) : *
staggerFrom ( targets:Array, duration:Number, vars:Object, stagger:Number, position:*,
staggerFromTo ( targets:Array, duration:Number, fromVars:Object, toVars:Object,
staggerTo ( targets:Array, duration:Number, vars:Object, stagger:Number, position:*,
startTime ( value:Number ) : *
time ( value:Number, suppressEvents:Boolean ) : *
timeScale ( value:Number ) : *
to ( target:Object, duration:Number, vars:Object, position:* ) : *
totalDuration ( value:Number ) : *
totalProgress ( value:Number, suppressEvents:Boolean ) : *
totalTime ( time:Number, suppressEvents:Boolean ) : *
useFrames ( ) : Boolean
Timeline Tip: Understanding the Position Parameter
示例：http://greensock.com/position-parameter/*----------------------------*/
TimelineMax
Constructor
TimelineMax ( vars:Object );
Public Properties
autoRemoveChildren : Boolean
data : *
smoothChildTiming : Boolean
timeline : SimpleTimeline
vars : Object
Public Methods
recent ( ) : Animation
add ( value:*, position:*, align:String, stagger:Number ) : *
addCallback ( callback:Function, position:*, params:Array, scope:* ) : TimelineMax
addLabel ( label:String, position:* ) : *
addPause ( position:*, callback:Function, params:Array, scope:* ) : *
call ( callback:Function, params:Array, scope:*, position:* ) : *
clear ( labels:Boolean ) : *
currentLabel ( value:String ) : *
duration ( value:Number ) : *
endTime ( includeRepeats:Boolean ) : Number
eventCallback ( type:String, callback:Function, params:Array, scope:* ) : *
TimelineMax.exportRoot ( vars:Object, omitDelayedCalls:Boolean ) : TimelineLite
from ( target:Object, duration:Number, vars:Object, position:* ) : *
fromTo ( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* ) : *
getActive ( nested:Boolean, tweens:Boolean, timelines:Boolean ) : Array
getChildren ( nested:Boolean, tweens:Boolean, timelines:Boolean, ignoreBeforeTime:Number ) :
getLabelAfter ( time:Number ) : String
getLabelBefore ( time:Number ) : String
getLabelsArray ( ) : Array
getLabelTime ( label:String ) : Number
getTweensOf ( target:Object, nested:Boolean ) : Array
invalidate ( ) : *
isActive ( ) : Boolean
kill ( vars:Object, target:Object ) : *
pause ( atTime:*, suppressEvents:Boolean ) : *
paused ( value:Boolean ) : *
play ( from:*, suppressEvents:Boolean ) : *
progress ( value:Number, suppressEvents:Boolean ) : *
remove ( value:* ) : *
removeCallback ( callback:Function, timeOrLabel:* ) : TimelineMax
removeLabel ( label:String ) : *
render ( time:Number, suppressEvents:Boolean, force:Boolean ) :
repeat ( value:Number ) : *
repeatDelay ( value:Number ) : *
restart ( includeDelay:Boolean, suppressEvents:Boolean ) : *
resume ( from:*, suppressEvents:Boolean ) : *
reversed ( value:Boolean ) : *
seek ( position:*, suppressEvents:Boolean ) : *
set ( target:Object, vars:Object, position:* ) : *
shiftChildren ( amount:Number, adjustLabels:Boolean, ignoreBeforeTime:Number ) : *
staggerFrom ( targets:Array, duration:Number, vars:Object, stagger:Number, position:*,
staggerFromTo ( targets:Array, duration:Number, fromVars:Object, toVars:Object,
staggerTo ( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) : *
startTime ( value:Number ) : *
time ( value:Number, suppressEvents:Boolean ) : *
timeScale ( value:Number ) : *
to ( target:Object, duration:Number, vars:Object, position:* ) : *
totalDuration ( value:Number ) : *
totalProgress ( value:Number, suppressEvents:Boolean ) : *
totalTime ( time:Number, suppressEvents:Boolean ) : *
tweenFromTo ( fromPosition:*, toPosition:*, vars:Object ) : TweenLite
tweenTo ( position:*, vars:Object ) : TweenLite
useFrames ( ) : Boolean
yoyo ( value:Boolean ) : *
/*----------------------------*/
GreenSock Ease Visualizer
http://greensock.com/docs/#/HTML5/GSAP/Easing/
/*----------------------------*/
/*----------------------------*/
2D Transforms
//much simplerTweenLite.to(element,2,{rotation:30, scaleX:0.8});
3D Transforms
TweenLite.to(element,2,{rotationX:45, scaleX:0.8, z:-300});
//apply a perspective to the PARENT element (the container) to make the perspective apply to all child elements (typically best)TweenLite.set(container,{perspective:500});//or set a default perspective that will be applied to every individual element that you tween in 3D:CSSPlugin.defaultTransformPerspective =500;//or apply perspective to a single element using "transformPerspective"TweenLite.set(element,{transformPerspective:500});
Notes about 3D transforms
force3D
开启 GPU加速渲染将消耗更多的GPU内存。
当force3D为true时，GSAP会在3D动画完成时，自动切换为2D，以释放更多的GPU内存
transformOrigin
transform动画注册点
//spins around the element's top left corner
TweenLite.to(element,2,{rotation:360, transformOrigin:"left top"});
//spins/scales around a point offset from the top left by 50px, 20px
TweenLite.to(element,2,{rotation:270, scale:0.5, transformOrigin:"50px 20px"});
//rotates around a point that is 400px back in 3D space, creating an interesting effect:TweenLite.to(element,2,{rotationY:360, transformOrigin:"50% 50% -400px"});
svgOrigin
TweenLite.to(svgElement, 1, {rotation:270, svgOrigin:"250 100"})
directionalRotation
TweenLite.to(element,2,{rotation:"-170_short"});//or even use it on 3D rotations and use relative prefixes:TweenLite.to(element,2,{rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});
autoAlpha
//fade out and set visibility:hiddenTweenLite.to(element,2,{autoAlpha:0});//in 2 seconds, fade back in with visibility:visibleTweenLite.to(element,2,{autoAlpha:1, delay:2});
className
TweenLite.to(myElement,1,{className:"class2"});
TweenLite.to(myElement,1,{className:"+=class2"});
clearProps
//tweens 3 properties and then clears only "left" and "transform" (because "scale" affects the "transform" css property. CSSPlugin automatically applies the vendor prefix if necessary too)TweenLite.from(element,5,{scale:0, left:200, backgroundColor:"red", clearProps:"scale,left"});
/*----------------------------*/
TweenLite.to(element,5,{bezier:{curviness:1.25, values:[{x:100, y:200},{x:250, y:400},{x:500, y:50}], autoRotate:true}, ease:Power1.easeOut});
values:
type:(default:"thru","thru", "soft", "quadratic"")
timeResolution:
curviness
curviness:1.5,
/*----------------------------*/
TextPlugin
/*----------------------------*/
Physics2DPlugin
/*----------------------------*/
DrawSVGPlugin
/*----------------------------*/
EaselPlugin 依赖于EaselJS
/*----------------------------*/
DirectionalRotationPlugin
/*----------------------------*/
/*----------------------------*/
ThrowPropsPlugin
/*----------------------------*/
RaphaelPlugin 依赖于RaphaelJS
