巧用缓动Tween实现数字递增动画

在开发新游戏过程中，我需要一个数字递增的动画效果。我不知道这块的专业术语是啥，搜了下有几种叫法：数字动画（Number Animation或Animated Numbers）和数字递增动画（Incrementing Number Animation）。如果有懂的朋友请指点下，大概效果如下：

当时想了想，实现的方法挺多的。一下就能大概知道逻辑：把一个number类型的变量在一定时间内从0加到9999，在这个过程中不断更新一个Label组件。

直接用update回调实现

思路还是蛮简单的，于是直接在一个节点挂载上一个Label组件和一个脚本组件。在脚本中用update来更新一个变量变化。那么问题就来了，这里必须要计算好时间和增量。假如我们要在2秒内从0增加到9999，那么每秒增量就是9999/2=4999.5。假如我们设置为60fps，那么每次update回掉大约就是0.01678秒。由此可以实现这个组件如代码：

虽然实现了想要的效果，但是看起来相当不优雅，还要控制各种状态，看起来相当原始。如果还想要加一点加速或减速的效果，那又难办了。

巧用缓动Tween实现

实现同样的效果，代码理解起来越简单，越容易维护，控制状态越少越好。利用缓动系统（Tween）看起来就是不错的事，之前用缓动更多时处理节点Node的运动。但我们可以看看tween函数的定义：

它能接受的类型是继承object的所有类型，这就提供了一个非常好的点，只要我是一个TypeScript的object对象，就让缓动来操作变化，那就可以完全接上Tween的能力了。于是就可以放弃了update函数回调，直接在start回调中执行一次就行了：

直接创建一个counter对象：{x:0}，这样Tween可以操纵它的x属性了。另外可以用上缓动函数，就引入了更多的效果，都不能造轮子。如果觉得变化还想改改，就利用ITweenOption的回调接口就可以自定义了。

写在最后

方法还有很多，只要能代码理解起来越简单，维护容易，能完美接上现有的能力就很好了。虽然数字提增功能比较简单，但背后能思考和学习的东西还是挺多的。越是那些我们习以为常的事物，或许就潜藏着我们尚未察觉的知识。