用微信小程序编写金额摇奖效果_微信小程序红包抽奖效果

由于小程序没有现成插件可用的情况较多，一些功能需要自己实现。比如新人红包，弹出红包的弹跳和之后追加的光圈效果，就用到你的css3动画编写了。这个还好，比如遇到金额摇奖的效果，可能就感觉复杂了。
数字翻动的动画样式，0-9似乎每个数字都要写。要显示00.00四位数字，每个数字显示区要多塞几组数字，最后翻动到目标金额。由于是下翻动效果，显示区开始的0不是几组数字中最下边的0，可以在最上边塞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 = "000"+Math.round(cash * 100) ;
              cashStr = cashStr.substr(-4, 4);
              var cash4, cash1, cash2, cash3;
              cash1 = parseInt(cashStr.charAt
1
2
3
4
5