Tween动画及缓动函数

本文主要是介绍Tween动画及缓动函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

缓动tween结构很简单，它是基于初始值，结束值，作用域公式来实现的。
缓动函数包括quad、cubic、sine、quint、circt、bounce、back、expo、elastic、quart等等
转载自：https://www.jianshu.com/p/c157c5898153 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
  http://dotween.demigiant.com
- greensocks 非常专业的js缓动，支持时间线模式
  https://greensock.com
- cocos2dx引擎内建
  http://www.cocos2d-x.org/reference/native-cpp/V3.3/d4/d0d/classcocostudio_1_1_tween.html
- egret js内建
  http://developer.egret.com/cn/apidoc/index/name/egret.Tween
- laya js内建
  https://layaair.ldc.layabox.com/api/laya/utils/Tween.html
- c++ 第三方tween
  https://github.com/sasq64/tween
- tween 维基百科
  https://en.wiktionary.org/wiki/tween