天天看点

透过HT for Web 3D看动画Easing函数本质

<a href="http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html" target="_blank">http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html</a>

透过HT for Web 3D看动画Easing函数本质
透过HT for Web 3D看动画Easing函数本质

一套好的动画框架是模型接口、用户体验和运行性能等多方面极难得到平衡的挑战,即使是如今各种GUI平台提供的主流动画框架这么多年了依然问题不少,不是具体场景的性能问题,就是多组件同时动画是莫名其妙各种bug,加上前面提到的我脑子不好使,实在记不住各种平台提供五发八门接口,因此我喜欢自己通过Model来达到控制View的动画效果,这样在动画过程改变哪些属性,改变的每个动画帧改变的幅度,动画之前之后的各种事件处理,多动画的并行还是串行处理一切都可以在自己的掌控之中。

透过HT for Web 3D看动画Easing函数本质

该例子近20种动画Easing类型分布在不同的箭头跑道上,当点击控制面板的animation按钮则开始启动动画,动画过程箭头将随着Easing的函数的逻辑决定前进的速度,这样多组动画同时进行时刻直观的对不同动画效果进行比较。箭头的颜色也随着前进距离逐渐由白变红,当达到终点时完全变红。

示例还借助了3D的空间新轴线,在垂直轴方向动态用曲线表示Easing函数在当前时间点的函数值,因此大家可以直观的体验到Easing函数曲线的动态变化过程,同时曲线段的颜色也根据该时间段箭头的前进距离由白变红。

透过HT for Web 3D看动画Easing函数本质

整个例子的运行效果给我感觉就像这个社会各式各样的人生路,大家都逃不过出生和死亡,大家的起点是一样的,终点的死亡也是谁也躲不过的,但不同人可以走出不同的人生曲线,easeNone:function(t){return t}这条是均匀的直线,给我感觉就是公务员之路,没有大起大落,每年都会收入更好,但快不来只能慢慢熬;elasticOut是最顺利的年少就达到事业巅峰,当然后续也没啥追求一路高位稳定等死;elasticOut是大器晚成类型,一路平平毫无建树,终老之前也有幸快速达到了目的地;其他波折动荡的类型如创业人生,每天你都不知道明天会发生什么,你可能一直坐着过山车,时而在低谷时而在顶峰,不过怎么样只要坚持继续前进人人都会达到理想的终点:

Everything will be okay in the end. If it’s not okay, it’s not the end.

继续阅读