tween的缓动效果大全和使用方法

缓动函数 自定义参数随时间变化的速率。

现实生活中，物体并不是突然启动或者停止，当然也不可能一直保持匀速移动。就像我们打开抽屉的过程那样，刚开始拉的那一下动作很快，但是当抽屉被拉出来之后我们会不自觉的放慢动作。或是掉落在地板上的物体，一开始下降的速度很快，接着就会在地板上来回反弹直到停止。

• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBounce
• easeOutBounce
• easeInOutBounce

官方代码和释义如下

	/**  缓动函数类，为 {{#crossLink "Tween"}}{{/crossLink}} 提供缓动效果函数。<br>
	函数效果演示： https://easings.net/ */
	export class Easing {
	
		/** !#zh 平方曲线缓入函数。运动由慢到快。 */
		quadIn(t: number): number;		
		/** !#zh 平方曲线缓出函数。运动由快到慢。 */
		quadOut(t: number): number;		
		/** !#zh 平方曲线缓入缓出函数。运动由慢到快再到慢。 */
		quadInOut(t: number): number;
		
		/** !#zh 立方曲线缓入函数。运动由慢到快。 */
		cubicIn(t: number): number;	
		/** !#zh 立方曲线缓出函数。运动由快到慢。 */
		cubicOut(t: number): number;
		/** !#zh 立方曲线缓入缓出函数。运动由慢到快再到慢。 */
		cubicInOut(t: number): number;
		
		/** !#zh 四次方曲线缓入函数。运动由慢到快。 */
		quartIn(t: number): number;		
		/** !#zh 四次方曲线缓出函数。运动由快到慢。 */
		quartOut(t: number): number;		
		/** !#zh 四次方曲线缓入缓出函数。运动由慢到快再到慢。*/
		quartInOut(t: number): number;
		
		/** !#zh 五次方曲线缓入函数。运动由慢到快。 */
		quintIn(t: number): number;	
		/** !#zh 五次方曲线缓出函数。运动由快到慢。 */
		quintOut(t: number): number;
		/** !#zh 五次方曲线缓入缓出函数。运动由慢到快再到慢。*/
		quintInOut(t: number): number;
		
		/** !#zh 正弦曲线缓入函数。运动由慢到快。 */
		sineIn(t: number): number;		
		/** !#zh 正弦曲线缓出函数。运动由快到慢。 */
		sineOut(t: number): number;		
		/** !#zh 正弦曲线缓入缓出函数。运动由慢到快再到慢。 */
		sineInOut(t: number): number;
		
		/** !#zh 指数曲线缓入函数。运动由慢到快。 */
		expoIn(t: number): number;
		/** !#zh 指数曲线缓出函数。运动由快到慢。 */
		expoOut(t: number): number;	
		/** !#zh 指数曲线缓入和缓出函数。运动由慢到很快再到慢。 */
		expoInOut(t: number): number;
		
		/** !#zh 循环公式缓入函数。运动由慢到快。 */
		circIn(t: number): number;		
		/** !#zh 循环公式缓出函数。运动由快到慢。 */
		circOut(t: number): number;		
		/** !#zh 指数曲线缓入缓出函数。运动由慢到很快再到慢。 */
		circInOut(t: number): number;		
		
		/** !#zh 弹簧回震效果的缓入函数。 */
		elasticIn(t: number): number;		
		/** !#zh 弹簧回震效果的缓出函数。 */
		elasticOut(t: number): number;		
		/** !#zh 弹簧回震效果的缓入缓出函数。 */
		elasticInOut(t: number): number;
		
		/** !#zh 回退效果的缓入函数。 */
		backIn(t: number): number;		
		/** !#zh 回退效果的缓出函数。 */
		backOut(t: number): number;		
		/** !#zh 回退效果的缓入缓出函数。 */
		backInOut(t: number): number;
			
		/** !#zh 弹跳效果的缓入函数。 */
		bounceIn(t: number): number;		
		/** !#zh 弹跳效果的缓出函数。 */
		bounceOut(t: number): number;		
		/** !#zh 弹跳效果的缓入缓出函数。 */
		bounceInOut(t: number): number;		
		
		/** !#zh 平滑效果函数。 */
		smooth(t: number): number;		
		/** !#zh 渐褪效果函数。 */
		fade(t: number): number;	
	}	

常用方法：

// quintOut 运动速度由慢到很快再到慢 可用于模拟转盘抽奖
// to（持续时间, [变动属性], [缓动效果]）绝对变化 
// by（持续时间, [变动属性], [缓动效果]）相对变化

// 1s 从x=0 横移 到x=100的位置 运动速度由慢到很快再到慢
this.node.setPosition(0, 0);
cc.tween(this.node)
  .delay(2)//延迟等待2s时间
  .to(1, {position: cc.v2(100, 0)})// [变动属性]
  .start()//开始播放动画

// 1s 横移相对于原位置右侧100单位 运动速度由慢到很快再到慢
cc.tween(this.node)
  .by(1, {position: cc.v2(100, 0)}, {easing: 'quintOut'})// [变动属性]+[缓动效果]
  .start()

//以每1秒2次的频率，不停闪烁 可以模拟萤火虫
cc.tween(this.node)
  .blink(1, 2)
  .repeat()//重复一次前一个动作
  .repeatForever()//无限重复前一个动作
  .start()