GreenSock Animation Platform

劳亦
2023-12-01

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)高扩展性 在其驾构基础上衍生了丰富多样的插件,合理应用插件,最大限度地减少膨胀和最大限度地提高性能。
 
 
 

如何使用呢?


最常用的方法是 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)
 
 
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:

 
 

传送门:

Examples:

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

 

Examples:哈尔的移动城堡

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

 
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

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

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

 

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

 

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

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/

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

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

 
CSSPlugin 
 
 

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

 

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

EaselPlugin 依赖于EaselJS

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

DirectionalRotationPlugin

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

AttrPlugin
 

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

ThrowPropsPlugin

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

RaphaelPlugin 依赖于RaphaelJS

 

转载于:https://www.cnblogs.com/tonyIt/p/4500322.html

 类似资料:

相关阅读

相关文章

相关问答