Cocos creator tween缓动动画中的easing怎么用

在 Cocos Creator 中，easing 用于控制动画的缓动效果，也就是动画的速率变化曲线。缓动函数影响动画的开始、进行和结束的速度，常见的缓动类型包括 线性、加速、减速 以及 弹跳 等。

以下是 Cocos Creator 中常用的几种 easing 类型及其解释：

1. Linear (线性缓动)

• cc.easeLinear()
• 动画按均匀的速度进行，没有任何加速或减速。速度保持恒定，适用于简单的动画效果。

2. EaseIn (加速)

• cc.easeIn()

• 动画从缓慢开始，逐渐加速到结束。适用于开始时动作较慢但逐渐加速的效果。

• 可传递一个参数，表示加速度：

  • cc.easeIn(2) 表示加速的力度。

3. EaseOut (减速)

• cc.easeOut()

• 动画从快到慢地进行，开始时速度较快，逐渐减缓，适合结束时的减速效果。

• 可传递一个参数，表示减速的力度：

  • cc.easeOut(2) 表示减速的幅度。

4. EaseInOut (加速再减速)

• cc.easeInOut()

• 动画先加速，再减速，适合在开始和结束时都需要较为柔和的过渡效果。

• 可传递一个参数，控制加减速的平滑度：

  • cc.easeInOut(2) 表示加速和减速的平滑度。

5. Bounce (弹跳)

• cc.easeBounceIn() 和 cc.easeBounceOut()

• cc.easeBounceIn()：动画开始时快速弹跳，逐渐减速并最终停止。

• cc.easeBounceOut()：动画开始时减速，接着以弹跳效果停止。

• cc.easeBounceInOut() 结合了 EaseIn 和 EaseOut 的弹跳效果，使得动画先加速后弹跳。

6. Elastic (弹性)

• cc.easeElasticIn() 和 cc.easeElasticOut()

• cc.easeElasticIn()：动画在开始时像橡皮带一样拉伸，然后快速反弹。

• cc.easeElasticOut()：动画开始时快速，然后像橡皮带一样拉伸停止。

• cc.easeElasticInOut() 结合了 EaseIn 和 EaseOut 的弹性效果，使得动画更为丰富。

7. Exponential (指数)

• cc.easeExponentialIn() 和 cc.easeExponentialOut()

• cc.easeExponentialIn()：动画开始时极其缓慢，然后迅速加速。

• cc.easeExponentialOut()：动画开始时非常快，然后迅速减速，直到结束。

• cc.easeExponentialInOut()：先缓慢加速，接着快速减速，形成流畅的过渡。

8. Sine (正弦)

• cc.easeSineIn() 和 cc.easeSineOut()

• cc.easeSineIn()：动画开始时缓慢，随着时间推移逐渐加速，模拟正弦波的渐变效果。

• cc.easeSineOut()：动画开始时较快，然后渐渐减速。

• cc.easeSineInOut()：动画开始和结束时缓慢，中间较快，形成平滑的过渡效果。

9. Quadratic / Cubic / Quartic (二次/三次/四次)

你可以根据动画的需求，选择合适的 easing 类型来控制动画的流畅性和动态效果。

• cc.easeQuadraticIn()：动画速度逐渐增加，符合二次函数的曲线。

• cc.easeQuadraticOut()：动画开始时快速，最后变得平缓。

• cc.easeQuadraticInOut()：动画开始和结束都较慢，中间较快。

• cc.easeCubicIn()、cc.easeCubicOut()、cc.easeCubicInOut()：类似于二次函数，但速度变化更加剧烈。

• cc.easeQuarticIn()、cc.easeQuarticOut()、cc.easeQuarticInOut()：四次函数，变化更加复杂，适合需要更强烈加速或减速的动画。

• cc.tween(node)
    .to(1, { position: cc.v2(100, 100) }, { easing: cc.easeOut(3) })
    .start();

  这将使得 node 从当前位置移动到 (100, 100)，并且使用 easeOut(3) 缓动效果，即动画开始时较快，逐渐减速并最终平滑停止。
   

  总结：

• EaseIn：开始时慢，逐渐加速。
• EaseOut：开始时快，逐渐减速。
   
• EaseInOut：先加速再减速。
• Bounce：弹跳效果，模拟弹簧或反弹。
• Elastic：弹性效果，像橡皮带一样伸缩。
• Exponential：指数级加速或减速。
• Sine：正弦波效果，逐渐变慢或加速。
• Quadratic / Cubic / Quartic：不同次数的多项式缓动，变化幅度更大。
• 
  这个微信小游戏中的合成效果，就用到了Elastic的弹性效果。可以看看效果。