目录

时间曲线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()
  • Power0.easeIn
  • Power0.easeInOut
  • Power0.easeOut
匀速
Power1
Power2
Power3
Power4
  • Power1.easeIn 等
  • Power1.easeInOut 等
  • Power1.easeOut 等
由快变慢,Power4效果最强烈
Sine
  • Sine.easeIn
  • Sine.easeInOut
  • Sine.easeOut
正弦效果,由快变慢,比Power1效果弱
Circ
  • Circ.easeIn
  • Circ.easeInOut
  • Circ.easeOut
突然减速
Expo
  • Expo.easeIn
  • Expo.easeInOut
  • Expo.easeOut
突然减速,效果更强
Back
  • Back.easeIn
  • Back.easeInOut
  • Back.easeOut
冲出终点后返回
Bounce
  • Bounce.easeIn
  • Bounce.easeInOut
  • Bounce.easeOut
弹跳,像小球丢在地面上
Elastic
  • Elastic.easeIn
  • Elastic.easeInOut
  • Elastic.easeOut
弹簧效果
RoughEase
  • RoughEase.ease.config()
生硬的来回震荡,就像坐在颠簸的车上。

  • clamp:是否不超过终点。默认false,超过
  • points:折点,默认20
  • randomize:是否随机折点强度,默认true
  • strength:折点强度,默认1,越大越强烈
  • taper:"in" | "out" | "both" | "none",设置起始还是结束平滑过渡没有效果,默认none
  • template:每一段的模板,默认Linear.easeNone,每一段都是匀速的
SlowMo
  • SlowMo.ease
快速开始,匀速慢速,快速结束。例如你有一段文字要展示,可以快速进场,然后缓慢移动展示,最后快速出场
SteppedEase
  • SteppedEase.config(12)
阶梯跳跃,通过config设置阶梯数
ExpoScaleEase
  • ExpoScaleEase.config(1, 2)
缩放动画(Scale)时的曲线设置

 

时间曲线在线演示地址(打开较慢)。

注意:在GreenSock 2.0后,Power0取代了Linear,Power1取代了Quad,Power2取代了Cubic,Power3取代了Quart,Power4取代了Quint/Strong。