欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序wxss制作扭蛋机

程序员文章站 2022-05-04 13:06:38
小程序制作扭蛋机 2019-09-24 13:26:53 公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能。在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题)。最后还是自己做一个吧- _ - ,效果如下: 1.wxml 当然我这里没有用wx:for遍历 2.wxss 这一步比较麻 ......

小程序制作扭蛋机

2019-09-24 13:26:53

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

微信小程序wxss制作扭蛋机

 

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