时间曲线Easing
优质
小牛编辑
129浏览
2023-12-01
TweenLite中包含基础时间曲线:Power0、Power1、Power2、Power3、Power4
TweenMax中包含拓展时间曲线:Back、Bounce、Circ、Elastic、Expo、ExpoScaleEase、Sine、RoughEase、SlowMo、SteppedEase
GreenSock 可以使用时间曲线对动画的过渡效果进行调整,类似于CSS的ease。时间曲线关键词是ease
,可以设置进场easeIn
、出场easeInOut
、进出场easeOut
。
//慢速开始,之后越来越快
new TweenMax('.box', 3, {x:500, ease:Power1.easeIn});
//快速开始,之后越来越慢
new TweenMax('.box', 3, {x:500, ease:Power1.easeOut});
//慢速开始,之后加快,结束前又减速
new TweenMax('.box', 3, {x:500, ease:Power1.easeInOut});
<big id="box1"> </big>
#box1{
width: 50px;
height: 50px;
display: block;
border-radius:4px;
background: #6fb936;
}
//进场由慢变快,离场由快变慢
TweenMax.to('#box1', 3, {x:500, ease:Power1.easeInOut});
Easing 种类
曲线种类 | 使用 | 说明(以出场为例) |
---|---|---|
Power0() |
| 匀速 |
Power1 Power2 Power3 Power4 |
| 由快变慢,Power4效果最强烈 |
Sine |
| 正弦效果,由快变慢,比Power1效果弱 |
Circ |
| 突然减速 |
Expo |
| 突然减速,效果更强 |
Back |
| 冲出终点后返回 |
Bounce |
| 弹跳,像小球丢在地面上 |
Elastic |
| 弹簧效果 |
RoughEase |
| 生硬的来回震荡,就像坐在颠簸的车上。
|
SlowMo |
| 快速开始,匀速慢速,快速结束。例如你有一段文字要展示,可以快速进场,然后缓慢移动展示,最后快速出场 |
SteppedEase |
| 阶梯跳跃,通过config设置阶梯数 |
ExpoScaleEase |
| 缩放动画(Scale)时的曲线设置 |
时间曲线在线演示地址(打开较慢)。
注意:在GreenSock 2.0后,Power0取代了Linear,Power1取代了Quad,Power2取代了Cubic,Power3取代了Quart,Power4取代了Quint/Strong。