时间曲线Easing

优质

小牛编辑

125浏览

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。