有时小程序没有现成插件可用,本文结合一个数字滚动摇奖效果,谈谈微信小程序中一些动画实现的方式。
实例上要显示四位数字,根据后台返回金额,比如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 = "000