在微信小程序中编写金额摇奖效果

有时小程序没有现成插件可用，本文结合一个数字滚动摇奖效果，谈谈微信小程序中一些动画实现的方式。

实例上要显示四位数字，根据后台返回金额，比如5.2元，处理成从00：00快速翻动到05：20的效果，处理的要贴近现实效果一些，动画要平滑。

思考：数字翻动的动画样式，0-9似乎每个数字都要写，好在不多具有可实现性。为了过渡平滑，四个数组多塞几组0-9数字，比如0-9+0-9+0-9+1+2..+5，这是数字5的数组。由于是下翻动效果，注意是0-9+0-9+0-9+1+2..+5的倒序，但这样一开始就把金额显示出来了，下面的都隐藏了，我们在最上边再补一个0。运行动画时先瞬间切换到最下边的0，也是0%动画时的位置，之后自下而上运动到那个摇奖数字就行了。实现以下的程序：

1.四个数字的数组容器，做好排布，设置超出隐藏。

2.每组数字为纵向排列，把得到的获奖金额，分解成四个数字，调用对应的数字动画。

3.这里四组数字动画需要设置不同的延迟启动。

4.class名称的统一性，与数字关联比较好，方便调用。

实现步骤：

拿到后台数据分解数字：

 var cash = (res.data.data) ? Number(res.data.data) : 0;      
              cash = cash == NaN ? 0 : cash;
              var cashStr = "00