TweenMax中文手册/TweenLite中文手册

TweenLite/TweenMax是GreenSock 动画平台中的核心动画工具,可用来构建补间动画(tween)。补间是flash时代的专业词汇,意思是在起始状态和终点状态之间补全中间过程。虽然现在我们使用动画这个词,但是其本质是不变的,仍然要包含四个要素:动画目标(target)、起始状态、终点状态、补间效果。例如将一个div从opacity:1经过5秒钟降低至opacity:0
TweenLite.fromTo('div', 5, {opacity:1}, {opacity:0});
//动画目标:div
//起始状态:opacity:1
//终点状态:opacity:0
//补间:5秒完成状态改变
起点状态经常可以省略,例如div以当前位置为起点,向右移动300px:
TweenLite.to('div', 5, {x:300});

例子中使用的CSS属性动画(opacity、x等)需要CSSPlugin插件支持,此插件包含在TweenMax.min.js中。如果你使用TweenLite.min.js,需另外加载CSSPlugin.min.js。

TweenMax中文手册章节划分

  • 关于设置动画目标和起始、终点状态的动画的结构化方法可参看01节:动画结构
  • 如果想要对动画进行一些初始化设置,如重复次数(repeat)缓动方式(ease)等可参看02节:动画初始设置
  • 03节:动画事件中介绍了动画的事件函数,如开始事件(onStart)、结束事件(onComplete)、返回事件(onReverseComplete)等
  • 常用的动画控制组件在 04节:动画播放组件,如播放(play)、暂停(pause)、重新播放(restart)等
  • 05节:动画属性调整 列出了你可以获取到的动画属性以及调整他们的方法,如动画时长(time)、播放进度(progress
  • 06节:实例属性 介绍了TweenLite/TweenMax实例的属性设置,如设置选择器、读取时间轴等
  • 07节:实例方法 介绍了TweenLite/TweenMax实例的函数方法,如删除动画、动画渲染

TweenLite和TweenMax区别

我们的API文档大部分以TweenMax为例。如果你使用的是简约版的TweenLite,把TweenMax改为TweenLite即可。
例如.to() 方法是公用的
TweenMax.to(obj, 1, {x:100});
TweenLite.to(obj, 1, {x:100});

我们已经在API上面标明了哪些方法是公用的,哪些是TweenMax独有的,下面是一个简要的列表
TweenLite 和TweenMax 共有方法 TweenMax 独有方法
delay()
delayedCall()
duration()
eventCallback
from()
fromTo()
getTweensOf()
invalidate()
isActive()
kill()
killDelayedCallsTo()
killTweensOf()
pause()
paused()
play()
progress()
restart()
resume()
reverse()
reversed()
seek()
set()
startTime()
time()
timeScale()
to()
totalDuration()
totalProgress()
totalTime()
getAllTweens()
isTweening()
killAll()
killChildTweensOf()
pauseAll()
repeat()
repeatDelay()
resumeAll()
staggerFrom()
staggerFromTo()
staggerTo()
updateTo()
yoyo()

TweenMax中文手册/TweenLite中文手册术语说明

GSAP GreenSock Animation Platform/GreenSock 动画平台
delayedCalls 延迟执行函数
eventCallback 事件回调函数
tween 动画/补间动画
starting value 起点属性
current values 当前属性
destination values/ending values 终点属性
stagger 错开
ease 时间曲线/速度曲线
timeline 时间轴
TweenLite/TweenMax 动画实例
TimelineLite/TimelineMax 时间轴实例
label 标记/标签
obj/target 动画目标/动画对象
kill 删除/清除/杀死