Framer教程 | 怎样让自己看起来更有钱？

作者: leadream | 来源:发表于2016-08-02 23:51 被阅读1089次

最近有好几笔大开销，支付宝里的钱越来越少了。看着那些数字逐渐变小变短，自己又无能为力，实在难过。但是我突然想到了一个可以让自己开心起来的办法。

我给自己做了一个假的余额宝页面。借助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事件，在该事件中执行此函数。