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平臺所高度優(yōu)化的性能，動畫測試工具：http://www.greensock.com/js/speed.html

2) 強大的功能集?

涉及reverse() / pause() / resume() /?

3) 排序，分組以及管理功能.。play() / pause() / restart() / reverse / time() / progress() /?

這些方法可以徹底改變你的動畫工作流程，使其更加模塊化和簡潔。 使用簡單的方式創(chuàng)建復雜的補間動畫序列或團體 以整體控制一個動畫。 4) 易于使用 設計者與開發(fā)人員都可使用 ? 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"}); ?

當目標對象為一個數(shù)組時，

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 :完成時回調函數(shù)參數(shù) ::?Array ? onCompleteScope?::??Object ? onReverseComplete ：動畫倒播完成時回調 ::?Function
? onReverseCompleteParams?:??動畫倒播完成時回調函數(shù)參數(shù) ::?Array ? onReverseCompleteScope?::?Object
onStart?::?Function ?開始時觸發(fā)函數(shù) ? onStartParams::?Array ?開始時觸發(fā)函數(shù)傳入參數(shù) ? 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平臺所高度優(yōu)化的性能，動畫測試工具：http://www.greensock.com/js/speed.html

2) 強大的功能集?

3) 排序，分組和管理功能

?

4)?JavaScript, AS3, and AS2?

? 5) 易于使用 設計者與開發(fā)人員都可使用 ? 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

?

轉載于:https://www.cnblogs.com/tonyIt/p/4500322.html

總結

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

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