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

最新推荐文章于 2024-08-16 17:42:27 发布

Justin86713

最新推荐文章于 2024-08-16 17:42:27 发布

阅读量987

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Justin86713/article/details/108327058

版权

在微信小程序中，由于缺乏现成插件，需要自行编写功能，如新人红包的弹跳和光圈效果。本文重点介绍如何实现金额摇奖的动画效果。通过CSS3动画，创建数字翻转效果，每个数字需要单独处理。初始状态在顶部填充0，当开始动画时，从底部开始翻转至目标金额。首先分解获奖金额为四个数字，然后分别调用带有不同延迟的数字动画，确保数字依次翻动。利用统一的class名方便操作，最终实现逼真的摇奖体验。

摘要由CSDN通过智能技术生成

由于小程序没有现成插件可用的情况较多，一些功能需要自己实现。比如新人红包，弹出红包的弹跳和之后追加的光圈效果，就用到你的css3动画编写了。这个还好，比如遇到金额摇奖的效果，可能就感觉复杂了。
数字翻动的动画样式，0-9似乎每个数字都要写。要显示00.00四位数字，每个数字显示区要多塞几组数字，最后翻动到目标金额。由于是下翻动效果，显示区开始的0不是几组数字中最下边的0，可以在最上边塞0作为开始显示数字。追加动画样式时先切换到最下边的0，也是0%动画时的位置，之后自下而上翻动到那个摇奖金额数字就行了。以这条思路作为驱动实现以下的程序：

四个数字的数组容器，做好排布，设置超出隐藏多余。要多塞几组数字。
每组数字为纵向排列，后台得到获奖金额，分解成四个数字，调用对应的数字动画。
这里四个数字不同时翻动，所以每组动画要设置不同的延迟。
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