微信小程式wxss製作扭蛋機

小程式製作扭蛋機

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,就是連續點擊按鈕動畫時間會變快,如果有更好的方法可以留言交流。