TweenMax动画插件的使用

适用于移动端和现代互联网的超高性能专业级动画插件

Tweenmax是GreenSock 动画平台的核心，配合其他插件可动画CSS属性、滤镜效果、颜色、声音、色彩、帧、饱和度、对比度、色调、色系、亮度、贝塞尔

TweenMax动画库的使用

动画结构

基础动画序列

参数名	类型	是否必填	描述
target	object	是	需要动画的对象
duration	number	是	动画持续时间，一般是秒
vars	object	是	动画参数

# TweenMax的构造函数
TweenMax(target, duration, vars);

# 定义动画的终态
TweenMax.to(target, duration, vars);

# 定义动画的开始状态
TweenMax.from(target, duration, vars);

# 通过设置动画起始点和结束点来初始化一个TweenMax
TweenMax.fromTo(target, duration, fromVars, toVars)

有间隔的动画序列

参数名	类型	是否必填	描述
targets	Array	是	要进行动画的对象，可以有多个，以数组形式传入
duration	number	是	动画持续的秒数（或帧数，如果设置了useFrames:true）
vars	object	是	设置动画的一些属性及其他参数
stagger	Number	否	每个动画的起始间隔，默认是0
onCompleteAll	Function	否	当所有显示对象都完成动画后要调用的函数
onCompleteAllParams	Array	否	onCompleteAll函数的参数，以数组形式传入
onCompleteAllScope		否	onCompleteAll函数的作用域，this

# 这些函数作用如上，只是多了设置间隔stagger
TweenMax.staggerTo(targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* )

# 设置动画的开始状态
TweenMax.staggerFrom(targets, dutarion, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

# 通过设置动画起始点和结束点来初始化一个TweenMax
TweenMax.staggerFromTo(target, duration, fromVars, toVars, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

cycle的使用

# 在stagger(错开)动画中设定属性组。虽然stagger限定了动画目标使用相同的属性
#  1. cycle对象里面可以设置数组形式的vars，以方便对每一个元素进行样式设置
#  2. 还可使用function关键词

cycle: {
	backgroundColor: ['red', 'yellow', 'blue'],
	y: function(index){
		return index*50;
	}
}

/* The cycle property is available in:

TweenMax.staggerFromTo()
TweenMax.staggerFrom()
TweenMax.staggerTo()
TimelineLite.staggerFromTo()
TimelineLite.staggerFrom()
TimelineLite.staggerTo()
TimelineMax.staggerFromTo()
TimelineMax.staggerFrom()
TimelineMax.staggerTo()

*/

TweenMax.delayedCall()

提供一种在设定的时间（或帧）后调用函数的简单方法。

参数名	类型	是否必填	描述
delay	Number	是	要延迟的秒数（或帧数，如果设置了useFrames:true）
callback	Function	是	要延迟执行的函数
params	Array	否	传递给onComplete函数的参数，以数组形式传入
scope	*	否	函数的作用域，this的指向，默认为空
useFrames	Boolean	否	设定延迟的时间模式是基于秒数还是帧数，默认false：秒

// 示例
var myTween2=TweenMax.delayedCall(2,myFunction,["参数1","参数2"])
function myFunction(param1, param2) {
   alert("延迟2秒输出"+param1+'和'+param2);
}

TweenMax.set()

立即设置目标的属性值而不产生过渡动画，相当于0的动画时间。返回TweenMax对象。

参数名	类型	是否必填	描述
target	object	是	需要移动的对象
vars	object	是	动画参数

动画参数Vars
- delay:Number 动画开始之前的延迟秒数（以帧为单位时则为帧数）
- ease: Ease (or Function or String) 过渡效果的速度曲线（缓动效果）。
- repeat: Number 动画在第一次完成后应重复的次数。
- repeatDelay: Number 每次重复之间的秒数（或帧）。
- yoyo: Boolean 如果设置yoyo为true，那么重复的动画将往返进行。
- yoyoEase: Ease | Boolean 定义动画返回时，缓动效果如何，默认false，返回时的缓动效果按照前进时的反转
- paused: Boolean 如果设置为true，动画将在创建时立即暂停。默认false
- startAt: Object 定义动画返回时，缓动效果如何，默认false，返回时的缓动效果按照前进时的反转。
- immediateRender:Boolean 立即渲染，默认false。
  
  一般来说，TweenMax的运动对象会在下一个渲染周期前(也就是下一帧)被渲染到场景中，除非你设置了delay。如果想强制立即渲染，可以把这个参数设为true。
  另外from()方法的运动对象是立即渲染的（默认true）
- overwrite: String (or int) 用来控制同一个对象上有多个动画时的覆盖之类的情况。[有六种模式，可以参考文档]
- useFrames: Boolean 当设置为true时，对这个TweenMax对象的时间计算方式基于帧而不是秒，一般帧速约为16.66ms（60帧/秒）
  
  可通过TweenMax.ticker.fps(10);设置帧速。帧速不能超过60
- lazy: Boolean 延迟渲染。这意味着它将尝试延迟渲染（写入值）直到最后时间点。这可以提高性能，因为它避免了某些浏览器所做的读/写/读/写布局颠簸。
- autoCSS: Boolean 自动识别CSS属性，省略css:{}包装器。默认true。
  
  默认为true，即为方便的形式，所以不用注意这个参数
- callbackScope: Object 用于所有回调的范围（onStart，onUpdate，onComplete等）。范围是“this”在任何回调中引用的内容。
动画事件
一些节点的触发事件，用到使可以查官方文档
动画播放组件
- 播放、暂停、获取暂停状态、从头开始、恢复播放、控制动画反向播放、获取动画的反转状态、直接进入某一时间点动画、改变动画时间
使用时，详细参数查阅文档
动画属性调整
改变动画的时间，延迟，重复等属性
实例属性/实例方法

最后，值得一提的是，除了下述列出的简单动画，他还包含了文字效果、3D变形等动画插件
其官网提供了许多炫酷的基础示例和实际应用，是很好的练习示例。

TweenMax动画库的使用

动画结构

动画参数Vars

动画事件

动画播放组件

动画属性调整