小程序制作扭蛋机
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,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。
原文地址：https://www.cnblogs.com/li-fenghan/p/11577828.html
时间： 2024-08-28 12:25:34