公司要制作活动小程序，其中有一个扭蛋机的效果实现抽奖的功能。在网上找了好久竟没有找到（不知道是不是我找代码的方式有问题)。最后还是自己做一个吧- _ - ,效果如下：

1.wxml

当然我这里没有用wx:for遍历

！-扭蛋机-view class=' egg ' image class=' egg _ Ji ' src=' http : { { IMgurl } } small _ program/game/game _ luck _ draw _ nd。png ' mode=' width FiX '/image image class=' play { { start？go ' : ' ' } } ' bind tap=' egg play ' src=' http : { { IMgurl } } small _ program/game/game _ luck _ draw _ egg play。png ' mode=' width fix '/image class=' ball ball _ 1 ' { start？魏一_ 1 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_ luck _ draw _ egg 1。png ' mode=' width FiX '/image class=' ball ball _ 2 ' { start？魏一_ 2 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_运气_抽奖_彩蛋2。png ' mode=' width FiX '/image class=' ball ball _ 3 ' { start？魏一_ 3 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_运气_抽奖_彩蛋3。png ' mode=' width FiX '/image class=' ball ball _ 4 ' { start？魏一_ 4 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_运气_抽奖_彩蛋4。png ' mode=' width FiX '/image class=' ball ball _ 5 ' { start？魏一_ 5 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_运气_ draw _ egg 5。png ' mode=' width FiX '/image class=' ball ball _ 6 ' { start？魏一_ 6 ' : ' ' } } ' src=' http : { { IMgurl } }小程序/游戏/游戏_运气_抽奖_彩蛋6。png ' mode=' width FiX '/image class=' ball ball _ 7 { { start？魏一_ 7 ' : ' ' } } ' src=' http : { { IMgurl } }小_程序/游戏/游戏_ luck _ draw _ egg 7。' png '模式=' width Fix '/图像隐藏=“{ { Qiu } }”动画=' { { ani } } ' class=' ball ball _ end ' src=' http : { { IMgurl } }小_程序/游戏/游戏_ luck _ draw _ egg 7。png ' mode=' width Fix '/'

这一步比较麻烦，需要调试扭蛋的位置和动画路径

/* 扭蛋机*/.鸡蛋{宽度： 100%;绝对位置：z-index : 3；top: 260rpx}。鸡蛋鸡蛋_吉{宽度：70%；保证金-左侧： 15%;z-index : 3；}.鸡蛋。播放{ width: 80rpx绝对位置：z-index : 4；top: 405rpxleft: 275rpx}。鸡蛋。球{ width: 75rpx绝对位置：z-index : 2；}.鸡蛋ball _ 1 { top : 290 rpxleft : 300 rpx }。鸡蛋ball _ 2 { top : 295 rpxleft : 360 rpx }。鸡蛋ball _ 3 { top : 260 rpxleft : 240 rpx }。鸡蛋ball _ 4 { top : 260 rpxleft : 420 rpx }。鸡蛋ball _ 5 { top : 230 rpxleft : 280 rpx }。鸡蛋ball _ 6 { top : 230 rpxleft : 340 rpx }。鸡蛋ball _ 7 { top : 220 rpxleft : 390 rpx }。鸡蛋ball _ end { top : 410 rpxleft : 390 rpx }。魏一_1 { animation:约1 1.5s线性无限；}.魏一2 {动画：约2 1.5s线性无限；}.魏一_3 { animation:约3 1.5s线性无限；} .魏一_ 4 { animation: around4 1.5s线性无限；}.魏一_5 { animation:约5 1.5s线性无限；}.魏一_6 { animation:约6 1.5s线性无限；}.魏一_7 { animation:约7 1.5s线性无限；}.go { animation:围绕0.3s线性1;}/* 位移*/@在{ 100% {-网络套件-变换：度旋转(-180度)}周围的关键帧} @在{ 1 { 0% {-web工具包-transform : translate(0rpx，0rpx) }周围的关键帧20% {-web套件-transform : translate(-100 rpx，-200 rpx)} 40% {-web套件-transform : translate(40 rpx，-280 rpx)} 60% {-web套件-transform -50rpx)} 100% {-web套件-transform : translate(0，0) }}周围的@关键帧3 { 0% {-web kit-transform : translate(0rpx，0rpx)} 20% {-web kit-transform : translate(180 rpx，10rpx)} 40% {-web kit-transform : translate(240 rpx，-110 rpx)} 60% {-web kit-transform-130 rpx)} 100% {-web kit-transform 3360 translate(0，0)} }关键帧大约5 { 0% {-web工具包-transform : translate(0rpx，0rpx)} 20% {-web kit-transform : translate(40 rpx，70 rpx)} 40% {-web kit-transform : translate(50 rpx，-210 rpx)} 60% {-web kit-transform :%-20 rpx)} 100% {-web kit-transform : translate(0，0)} } 7周围的@关键帧{ 0% {-web套件-transform : translate(0rpx，0rpx)} 20% {-web套件-transform : translate(80 rpx，-50 rpx)} 40% {-web套件-transform : translate(-180 rpx，-100 rpx)} 60% {-web套件-transform 3330

这一步要比钢性铸铁要是要简单的多，点击使动画动起来，调用美国石油学会(美国石油协会)接口获取奖品就可以了

页面({ /** *页面的初始数据*/data : { imgurl 3360 app。数据。imgurl，开始：错误，丘： true，}，/** *点击扭蛋机*/EgPlay(){ let _ this=this；_this.setData({ start: true，})setTimeout(()={ _ this。setdata({ start : false，丘： false，}) //球落下动画var动画=wx。create animation({ duration : 1500，timingFunction: ' ease '，})；动画。不透明度(1)。这一步。setdata({ ani :动画。export()})}，3000)；_ this . setdata({ 0丘： true }) //将动画返回到开始位置var动画=wx。create animation({ duration : 1500，timingFunction: ' ease '，})；动画。不透明度(0)。这一步。setdata({ ani :动画。export()})}，这个动画有个小的臭虫，就是连续点击按钮动画时间会变快，如果有更好的方法可以留言交流。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。