微信小程序wxss制作扭蛋机

Posted 2022-11-28 li-fenghan

小程序制作扭蛋机

2019-09-24 13:26:53

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

 

 1.wxml 

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

  <!-- 扭蛋机 -->
  <view class="egg">
    <image class="egg_ji" src="imgUrlsmall_program/game/game_luck_draw_nd.png" mode="widthFix"></image>
    <image class="play start?‘go‘:‘‘" bindtap="eggPlay" src="imgUrlsmall_program/game/game_luck_draw_eggplay.png" mode="widthFix"></image>
    <image class="ball ball_1 start?‘weiyi_1‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg1.png" mode="widthFix"></image>
    <image class="ball ball_2 start?‘weiyi_2‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg2.png" mode="widthFix"></image>
    <image class="ball ball_3 start?‘weiyi_3‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg3.png" mode="widthFix"></image>
    <image class="ball ball_4 start?‘weiyi_4‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg4.png" mode="widthFix"></image>
    <image class="ball ball_5 start?‘weiyi_5‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg5.png" mode="widthFix"></image>
    <image class="ball ball_6 start?‘weiyi_6‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg6.png" mode="widthFix"></image>
    <image class="ball ball_7 start?‘weiyi_7‘:‘‘" src="imgUrlsmall_program/game/game_luck_draw_egg7.png" mode="widthFix"></image>
   <image hidden="qiu" animation="ani" class="ball ball_end" src="imgUrlsmall_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,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。