GreenSock Animation Platform

Tweenlite 的緣來:

shakeEffect:http://www.ghugo.com/wp-content/uploads/2013/09/ShakeEffektSample.swf

 

什麼是GSAP?

http://codepen.io/GreenSock/pen/yhEmn

http://greensock.com/get-started-js

DrawSVGPlugin

http://codepen.io/GreenSock/pen/jEEoyw

 

bezierTween

http://codepen.io/GreenSock/pen/LuIJj

 

Transform

http://codepen.io/GreenSock/pen/kingu

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 示例：

Jump Start tour

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)

 

 

paused : 是否暫停 :: Boolean

 

 

immediateRender : 即時渲染 :: Boolean

 

overwrite ：覆蓋 :: String (or integer)

 

onComplete: 完成時回調 :: Function

 

onCompleteParams :完成時回調函數參數 :: Array

 

onCompleteScope ::  Object

 

onReverseComplete ：動畫倒播完成時回調 :: Function

 

onReverseCompleteParams :  動畫倒播完成時回調函數參數 :: Array

 

 

onReverseCompleteScope :: Object

 

onStart :: Function   開始時觸發函數

 

 

onStartParams:: Array   開始時觸發函數傳入參數

 

 

onStartScope :: Object 

 

 

onUpdateParams :: Array

 

 

onUpdateScope :: Object 

 

 

useFrames :: Boolean 

 

onOverwrite :: Function

 

autoCSS :: Boolean 

ex: TweenLite.to(element, 2, {css:{left:"200px", top:"100px"}, ease:Linear.easeNone});

Examples:

 

 

傳送門：

http://codepen.io/GreenSock/pen/sLavi

Examples:

TweenLite.to(element,1,{css:{top:"100px", left:"50px", backgroundColor:"#ff0000", fontSize:"12px"}, delay:0.5});

 

傳送門： http://codepen.io/GreenSock/pen/wsxjv

 

 

Examples:哈爾的移動城堡

傳送門： http://codepen.io/gordonnl/pen/byouf

Notes / tips:

1). TweenLite.to(element, 2, {left:"-=20px"});

 

2). TweenLite.defaultEase

 

3). TweenLite.killTweensOf(myObject)

     TweenLite.killTweensOf("#myID")

 

4). TweenLite.killDelayedCallsTo(myFunction);

    TweenLite.killTweensOf(myFunction);

 

 

Public Properties

data : *

TweenLite.defaultEase :Ease.Power1.easeOut

 

TweenLite.defaultOverwrite :String = "auto"

 

TweenLite.selector :*= document.getElementById()

 

target :Object

 

TweenLite.ticker : Object

timeline : SimpleTimeline

vars : 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

連接：  http://codepen.io/GreenSock/pen/Dqgwn

 

TweenLite.fromTo ( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenLite

TweenLite.getTweensOf ( target:*, onlyActive:Boolean ) : Array

 

invalidate ( ) : *

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 ) : *

 

 

Animation ( duration:Number, vars:Object );

 

Public Properties

data 

timeline

vars 

Public Methods

 

delay ( value:Number ) : *

 

duration ( value:Number ) : *

 

eventCallback ( type:String, callback:Function, params:Array, scope:* ) : *

invalidate ( ) : *

isActive ( ) : Boolean

 

連接：  http://codepen.io/GreenSock/pen/Pwzomo

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

TweenMax.to()

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()

TweenMax.fromTo()

 

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 ) : *

 

/*----------------------------*/

 

TimelineLite

 

 

Constructor

TimelineLite ( vars:Object );

 

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:*, 

連接: http://codepen.io/GreenSock/pen/JwfvL

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/

/*----------------------------*/

Draggable

/*----------------------------*/

 

CSSPlugin 

示例： http://greensock.com/css3/

 

 

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"});

 

 

/*----------------------------*/

 

 BezierPlugin

 

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

http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/

 

/*----------------------------*/

EaselPlugin 依賴於EaselJS

/*----------------------------*/

DirectionalRotationPlugin

/*----------------------------*/

AttrPlugin

 

/*----------------------------*/

ThrowPropsPlugin

/*----------------------------*/

RaphaelPlugin 依賴於RaphaelJS