tweenmax动画库学习笔记

2018-05-07

TweenMax

1、动画的实例

new TimeLineMax()

2、to():添加动画

参数说明:
(1)元素选择器或对象
(2)持续时间
(3)对象 变化的属性——>值
(4)【可选】动画延迟发生时间 可写数字, " -=0.5 " , " +=0.5 "

3、play():播放动画

4、stop():停止动画

5、reverse():反向动画

6、onComplete():运动结束后触发对应的函数

7、onReverseComplete():反向运动结束后触发对应的函数

8、add() 添加状态 参数说明:字符串或一个函数

解释说明:当add()里面的参数是一个函数的时候,添加函数并执行函数

9、TweenTo() 完成指定的动画(过渡) 参数说明:指定时间或状态的字符串

add()配合tweenTo()使用,当完成某一个状态之前的动画时,添加add(function(){}),执行次函数。
当TweenTo()里面的参数是时间的时候,即为完成指定时间内的动画。

10、seek():完成指定的动画(无过渡)

参数说明:(1)指定时间或状态 (2)【可选】布尔值 true:不执行函数 默认; false:执行函数

11、time():动画已执行的时间

12、clear():清楚所有的动画

13、staggerTo():添加动画

参数说明:(1)元素选择器或对象(2)持续时间 (3)对象 变化的属性——>值 (4)【可选】动画延迟发生时间 可写数字, '-=0.5','+=0.5'

其中前三个参数和to()类似,重点说明一下第四个参数

14、totalDuration() : 获取动画的总时长

15、getLabelTime():返回从开始到当前状态的时间

参数说明:1、状态的字符串 返回值是一个数字

16、currentLable():获取当前状态 返回值是状态的字符串

解释说明:getLabelTime()和currentLable()结合使用
获取当前状态开始到结束所使用的时间,demo见以下

17、getLabelAfter():获取下一个状态

参数说明:1、时间数字 返回值是状态的字符串,如果没有下一个状态返回null

18、getLabelBefore():获取上一个状态

参数说明:1、时间数字 返回值是状态的字符串,如果没有上一个状态返回null

19、ease:动画运动形式

Tween类型:

Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic Back Bounce

ease类型:

easeIn easeOut easeInOut

Tags: javascript