Tween动画及缓动函数

Tween动画及缓动函数

缓动tween结构很简单，它是基于初始值，结束值，作用域公式来实现的。
缓动函数包括quad、cubic、sine、quint、circt、bounce、back、expo、elastic、quart等等
转载自： Zszen

参考egret使用缓动Tween实现类似抛物线的效果

图示

下图所示，所有公式的作用域都是从0～1

简介

• 首先说一下一般引擎下的tween都比较类似，这也是游戏开发熟悉一个新平台的老朋友最好的接触点。
• 有些tween有linear公式，像egret只要不填，就是线性，也就是从0～1连接的直线。
• 其他公式简单聊一下：
  sine公式其实就是用到了它的1/4波形，inOut是将两个波形叠加在一起。Cubic是取三次方，其他的有取四次方，五次方的公式。
  • in 越来越快，开始很缓慢，结束很突然
  • out 越来越慢，开始很突然，结束很缓慢
  • inOut 先快后慢，两端速度都趋近0，过程中达到最大值

公式分类

• 匀速 linear 用于匀速运动，开始和结束都比较突然，适用于游戏中卷轴类匀速运动，颜色，透明度过渡等。
• cubic等缓慢公式，用于慢慢展现或者慢慢靠近结束，大部分物体运动都可以用这种效果来做
• back 缓冲恢复，视觉冲击力会比缓慢公式好一点，但是全局用就有点唐突，个人觉得把back公式加在需要着重展示的动画里面比较好，比如获得道具，消除奖励等。
• elastic 果冻效果，比back效果更强一些，会多抖动几次。
• bounce 模拟小球落地，最简单模拟东西落地的弹性效果，虽然也假了点，贵在简单易用。
• 瞬间处理函数，用于直接将对象的值设置为制定的值，或者响应特定的函数和方法等都属于这一类。
• 你可以自己写公式，但现有的已经足够用了。

延迟

• tween一般都包含delay/wait函数用于延迟动作的继续执行。

事件响应

• 更新事件，每次对象的值更新后会调用的函数，一般为update
• 某个时间点激活指定函数，可以像动作组合一样放到任何位置，它可能刚开始运行缓动就被调用，或者结束前被调用，这取决于你的调配，一般为callback。
• 完成事件，当对象的缓动组合执行结束后调用，一般为complete

参考

• 更多的缓动教学以及各个平台对应的缓动引擎可以在下方了解：
  • unity平台 dotween
    
  • greensocks 非常专业的js缓动，支持时间线模式
    
  • cocos2dx引擎内建
    .3/d4/d0d/classcocostudio_1_1_tween.html
  • egret js内建
    .Tween
  • laya js内建
    .html
  • c++ 第三方tween
    
  • tween 维基百科