小程序制作扭蛋机
2019-09-24 13:26:53
公司要制作活动小程序，其中有一个扭蛋机的效果实现抽奖的功能。在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题)。最后还是自己做一个吧- _ - ,效果如下:
1.wxml
当然我这里没有用wx:for遍历
<!-- 扭蛋机 --> <view class="egg"> <image class="egg_ji" src="{{imgUrl}}small_program/game/game_luck_draw_nd.png" mode="widthFix"></image> <image class="play {{start?‘go‘:‘‘}}" bindtap="eggPlay" src="{{imgUrl}}small_program/game/game_luck_draw_eggplay.png" mode="widthFix"></image> <image class="ball ball_1 {{start?‘weiyi_1‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg1.png" mode="widthFix"></image> <image class="ball ball_2 {{start?‘weiyi_2‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg2.png" mode="widthFix"></image> <image class="ball ball_3 {{start?‘weiyi_3‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg3.png" mode="widthFix"></image> <image class="ball ball_4 {{start?‘weiyi_4‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg4.png" mode="widthFix"></image> <image class="ball ball_5 {{start?‘weiyi_5‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg5.png" mode="widthFix"></image> <image class="ball ball_6 {{start?‘weiyi_6‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg6.png" mode="widthFix"></image> <image class="ball ball_7 {{start?‘weiyi_7‘:‘‘}}" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix"></image> <image hidden="{{qiu}}" animation="{{ani}}" class="ball ball_end" src="{{imgUrl}}small_program/game/game_luck_draw_egg7.png" mode="widthFix" ></image> </view>
2.wxss
这一步比较麻烦,需要调试扭蛋的位置和动画路径
1 /* 扭蛋机 */ 2 .egg{ 3 width: 100%; 4 position: absolute; 5 z-index: 3; 6 top: 260rpx; 7 } 8 .egg .egg_ji{ 9 width: 70%; 10 margin-left: 15%; 11 z-index: 3; 12 } 13 .egg .play{ 14 width: 80rpx; 15 position: absolute; 16 z-index: 4; 17 top: 405rpx; 18 left: 275rpx; 19 } 20 .egg .ball{ 21 width: 75rpx; 22 position: absolute; 23 z-index: 2; 24 } 25 .egg .ball_1{ 26 top: 290rpx; 27 left: 300rpx; 28 } 29 .egg .ball_2{ 30 top: 295rpx; 31 left: 360rpx; 32 } 33 .egg .ball_3{ 34 top: 260rpx; 35 left: 240rpx; 36 } 37 .egg .ball_4{ 38 top: 260rpx; 39 left: 420rpx; 40 } 41 .egg .ball_5{ 42 top: 230rpx; 43 left: 280rpx; 44 } 45 .egg .ball_6{ 46 top: 230rpx; 47 left: 340rpx; 48 } 49 .egg .ball_7{ 50 top: 220rpx; 51 left: 390rpx; 52 } 53 .egg .ball_end{ 54 top: 410rpx; 55 left: 390rpx; 56 } 57 58 .weiyi_1 { 59 animation: around1 1.5s linear infinite; 60 } 61 .weiyi_2 { 62 animation: around2 1.5s linear infinite; 63 } 64 .weiyi_3 { 65 animation: around3 1.5s linear infinite; 66 } 67 .weiyi_4 { 68 animation: around4 1.5s linear infinite; 69 } 70 .weiyi_5 { 71 animation: around5 1.5s linear infinite; 72 } 73 .weiyi_6 { 74 animation: around6 1.5s linear infinite; 75 } 76 .weiyi_7 { 77 animation: around7 1.5s linear infinite; 78 } 79 .go{ 80 animation: around 0.3s linear 1; 81 } 82 83 84 /* 位移 */ 85 @keyframes around{ 86 100% { 87 -webkit-transform: rotate(-180deg) 88 } 89 } 90 91 @keyframes around1 { 92 0% { 93 -webkit-transform: translate(0rpx, 0rpx) 94 } 95 20% { 96 -webkit-transform: translate(-100rpx, -200rpx) 97 } 98 40% { 99 -webkit-transform: translate(40rpx, -280rpx) 100 } 101 60% { 102 -webkit-transform: translate(150rpx, -200rpx) 103 } 104 80% { 105 -webkit-transform: translate(150rpx, -50rpx) 106 } 107 100% { 108 -webkit-transform: translate(0, 0) 109 } 110 } 111 112 @keyframes around2 { 113 0% { 114 -webkit-transform: translate(0rpx, 0rpx) 115 } 116 20% { 117 -webkit-transform: translate(100rpx, -200rpx) 118 } 119 40% { 120 -webkit-transform: translate(-20rpx, -280rpx) 121 } 122 60% { 123 -webkit-transform: translate(-150rpx, -200rpx) 124 } 125 80% { 126 -webkit-transform: translate(-150rpx, -50rpx) 127 } 128 100% { 129 -webkit-transform: translate(0, 0) 130 } 131 } 132 133 @keyframes around3 { 134 0% { 135 -webkit-transform: translate(0rpx, 0rpx) 136 } 137 20% { 138 -webkit-transform: translate(180rpx, 10rpx) 139 } 140 40% { 141 -webkit-transform: translate(240rpx, -110rpx) 142 } 143 60% { 144 -webkit-transform: translate(100rpx, -240rpx) 145 } 146 80% { 147 -webkit-transform: translate(-50rpx, -130rpx) 148 } 149 100% { 150 -webkit-transform: translate(0, 0) 151 } 152 } 153 154 @keyframes around4 { 155 0% { 156 -webkit-transform: translate(0rpx, 0rpx) 157 } 158 20% { 159 -webkit-transform: translate(-180rpx, 10rpx) 160 } 161 40% { 162 -webkit-transform: translate(-240rpx, -110rpx) 163 } 164 60% { 165 -webkit-transform: translate(-100rpx, -240rpx) 166 } 167 80% { 168 -webkit-transform: translate(50rpx, -130rpx) 169 } 170 100% { 171 -webkit-transform: translate(0, 0) 172 } 173 } 174 175 @keyframes around5 { 176 0% { 177 -webkit-transform: translate(0rpx, 0rpx) 178 } 179 20% { 180 -webkit-transform: translate(40rpx, 70rpx) 181 } 182 40% { 183 -webkit-transform: translate(50rpx, -210rpx) 184 } 185 60% { 186 -webkit-transform: translate(-80rpx, -100rpx) 187 } 188 80% { 189 -webkit-transform: translate(190rpx, -50rpx) 190 } 191 100% { 192 -webkit-transform: translate(0, 0) 193 } 194 } 195 196 @keyframes around6 { 197 0% { 198 -webkit-transform: translate(0rpx, 0rpx) 199 } 200 20% { 201 -webkit-transform: translate(-150rpx, -50rpx) 202 } 203 40% { 204 -webkit-transform: translate(130rpx, -140rpx) 205 } 206 60% { 207 -webkit-transform: translate(-110rpx, -180rpx) 208 } 209 80% { 210 -webkit-transform: translate(-130rpx, -20rpx) 211 } 212 100% { 213 -webkit-transform: translate(0, 0) 214 } 215 } 216 217 @keyframes around7 { 218 0% { 219 -webkit-transform: translate(0rpx, 0rpx) 220 } 221 20% { 222 -webkit-transform: translate(80rpx, -50rpx) 223 } 224 40% { 225 -webkit-transform: translate(-180rpx, -100rpx) 226 } 227 60% { 228 -webkit-transform: translate(50rpx, -150rpx) 229 } 230 80% { 231 -webkit-transform: translate(-180rpx, -20rpx) 232 } 233 100% { 234 -webkit-transform: translate(0, 0) 235 } 236 }
3.js
这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了
1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 imgUrl: app.data.imgUrl, 8 start : false, 9 qiu: true, 10 }, 11 12 /** 13 * 点击扭蛋机 14 */ 15 eggPlay(){ 16 let _this = this; 17 18 _this.setData({ 19 start: true, 20 }) 21 setTimeout(() => { 22 _this.setData({ 23 start: false, 24 qiu: false, 25 }) 26 //球落下动画 27 var animation = wx.createAnimation({ 28 duration: 1500, 29 timingFunction: ‘ease‘, 30 }); 31 animation.opacity(1).step() 32 this.setData({ 33 ani: animation.export() 34 }) 35 }, 3000); 36 37 _this.setData({ 38 qiu: true 39 }) 40 //将动画返回到开始位置 41 var animation = wx.createAnimation({ 42 duration: 1500, 43 timingFunction: ‘ease‘, 44 }); 45 animation.opacity(0).step() 46 this.setData({ 47 ani: animation.export() 48 }) 49 },
这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。