时间曲线Easing

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});
  • HTML
  • CSS
  • JS
  • 展示
 

#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。