最近有好几笔大开销，支付宝里的钱越来越少了。看着那些数字逐渐变小变短，自己又无能为力，实在难过。但是我突然想到了一个可以让自己开心起来的办法。
我给自己做了一个假的余额宝页面。借助Framer的镜像预览功能，在手机上查看这个页面足以以假乱真了。最终的效果怎么样？还不错吧？
现在，我要把这个技能告诉你。借此正好讲讲Framer里面的函数是怎样使用的。
函数，是程序员偷懒的一个重要手段。厉害的程序员一般都不会写重复的代码，所以，重复使用率比较高的代码片段都会被写成函数。今天我们要做的这个余额宝“数钱特效”就需要用到函数。
我们先观察一下这个特效：有四个地方的金额或比率数字由小变大，而且越到后面其速度越慢。像这种计数的效果，一般就是每隔一段时间把数字增加一点来实现，Framer里面提供了定时器方法（Utils.interval）可以实现。但是定时器的间隔时间是固定的，不能实现减速增涨的效果。那我们就换一种思路，使用延时方法（Utils.delay），每次延时都比上一次要久一点，就可以实现了。
我们先做好素材，就是余额宝这一页的背景。上面的数字都空着，把它拖进Framer，正好填充Nexus 5X的屏幕。
自动生成代码如下：
接下来我们就创建四个数字图层。先插入一个图层，给他命名为receipts，将其放在对应位置。左侧会自动生成代码：
给其定义style属性并调整其字号、颜色等属性，现在的效果如下：
其他图层的做法和它类似，代码我就不往上面贴了。四个图层都写完之后我们就要定义一个事件函数，使用户点击整个背景的时候，所有数字就开始增涨。
先看看这个函数怎么写。我们定义计数函数为moneyCount，在此之前先定义两个变量：昨日收益起始值receiptsStart和最终值receiptsMax。
moneyCount函数的工作逻辑是这样的：如果receiptsStart没有达到58，就等待receiptsStart×0.000000001秒之后，将receiptsStart保留两位小数（Utils.round）并保存在变量showNumber中，如果变量showNumber此时是整数，没有小数位或小数位不足两位，就补上小数点并补上0（toFixed(2)），将最终结果显示在图层receipts中。通过式子receiptsStart = receiptsStart+receiptsMax/1283计算后将receiptsStart变大一点，再次执行moneyCount( )函数。由于receiptsStart不断增大，延时的时间receiptsStart×0.000000001也是不断增大的，但可能这个值太小了，导致效果不是那么明显。
这段代码的神奇之处在于函数moneyCount( )内部再次嵌套moneyCount( )函数，使其能够源源不断地执行下去（术语叫做递归函数）。需要注意的是，在代码里乘号是“*”，除号是“/”，和我们数学中的写法不太一样。
此时函数定义了，但我们仍旧看不到效果，是因为函数还没有被执行。我们给背景bg插入一个tap事件，在该事件中执行此函数。
此时点击背景，就可以看见昨日收益增涨的效果了。
其他三处的数字增涨和这个差不多，那是不是要再写三个函数呢？不是。这时候我们就要学会偷懒了，我们给函数加上参数，在调用时传入不同的参数就可以实现一个函数多次调用了。
我用两个数组来存储他们的起始值和最终值，从前到后分别对应的是昨日收益、总金额、万份收益和累计收益。函数moneyCount新增两个参数i和countLayer，i表示当前需要增涨效果的图层在前面起始值和最终值数组中的索引值，countLayer表示这个图层对象。
在点击事件中，就只需要这么写，四处调用函数传入不同的参数，就可以控制不同的图层。
最终效果就达到了，配合Framer手机端APP，我在手机上预览它，感觉和真的一样。由于金额设置比较大，这些数字的增涨足足持续了半分钟，我故意把手机向两边倾斜了一下，不经意间让身边的朋友看到。
朋友们纷纷投来羡慕的目光，让深处长沙40度高温中的我感觉到好像有一缕春风吹过。
源代码戳这里
