美文网首页
缓动是什么? Tween?

缓动是什么? Tween?

作者: Zszen | 来源:发表于2018-11-10 03:12 被阅读123次

缓动tween结构很简单,它是基于初始值,结束值,作用域公式来实现的。

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


简介

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

公式分类

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

延迟

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

事件响应

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

一些经验

  • 交互性操作时尽量使用out类公式,这类公式初始速度快,会有效反馈用户操作,而特效类的则主要倾向于in公式或者in&out公式,在真实开发中自行斟酌
  • 使用缓动是要明确当前值,要运动到的值,以及运动过程
    • 这些值可以稍加随机,但是即便随机,这些值也都是固定好的结果等待运动呈现。
  • 一般引擎都支持将各种运动组合起来实现
  • 举几个常用的例子:
    • a 设置对象x为linear匀速运动,y为bounce弹跳运动,则可以做出小球在水平地面上弹跳前进的效果,因为此公式是肯定从0~1点运行,所以不可以用这个公式来做出无损弹性永久弹跳的效果。
    • b 在对象被销毁前灿烂一次,将对象的缩放,或者位置进行修改,在快结束的时候调用透明度或visible令其消失,比直接强硬的消失要友好的多。
    • c 抛物线运动,和a例子类似,x设置为linear匀速运动,y设置为cubicIn运动就可以实现。
    • d 拼接运动,其实如果不满足于同一公式拼接,完全可以自己来拼接不同的In和Out公式来达到效果
    • e 运动的对象可能处于被销毁的状态,所以如果运动结束需要对对象进行调用,还是需要进行判断为妙。
    • f 任何情况销毁对象都应该确认tween是否也被销毁,以免引起不必要的麻烦。
    • g 一般引擎都支持对同一个对象执行多个不同的tween,但是多个tween之间不要有相同的数值,避免导致数值鬼畜。
    • h 有一些动态效果并不太适合直接被修改变量值,而tween函数一般也提供了对自定义变量的动态更改的支持。
    • i 对多个对象执行相似的tween动画,只要稍微调整一点变量值,或者时间长度,就会产生不一样的差异化缓动效果
    • j 一般tween对象对休眠,切到后台等(js无此问题)操作都没有特别好的兼容性(至少我知道的一些引擎是这样),体现在手机切到后台或待机再回来,正在进行的缓动会卡住,而如果缓动还携带了转场等重要操作,那么这个游戏/app可能会卡死在这里。这种情况要进行测试,如果发现存在这种问题,需要自行解决。

后话

先有了硅,后就有了mos管
先有了电脑,后就有了程序语言
先有了面向程序,后就有了面向对象
先有了逻辑,后就有了架构
先有了运行周期,后就有了缓动引擎,物理引擎
先有了前人的成果,后就有了你将它发挥到极致的热情

参考

更多的缓动教学以及各个平台对应的缓动引擎可以在下方了解:
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

每个平台,甚至每个tween缓动都有自己的特色和用法,但唯一不变的是它的作用。

相关文章

网友评论

      本文标题:缓动是什么? Tween?

      本文链接:https://www.haomeiwen.com/subject/spgaxqtx.html