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。
repeat
)缓动方式(ease
)等可参看02节:动画初始设置onStart
)、结束事件(onComplete
)、返回事件(onReverseComplete
)等play
)、暂停(pause
)、重新播放(restart
)等time
)、播放进度(progress
)
TweenMax.to(obj, 1, {x:100});
TweenLite.to(obj, 1, {x:100});
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()
|
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 | 删除/清除/杀死 |