小程序制作扭蛋机
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,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。