效果如下:
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: {7imgUrl: app.data.imgUrl,8start : false,9qiu: true,10 },11 12 /**13 * 点击扭蛋机14 */15 eggPlay(){16let _this = this;17 18_this.setData({19 start: true,20})21setTimeout(() => {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: true39})40//将动画返回到开始位置41var animation = wx.createAnimation({42 duration: 1500,43 timingFunction: 'ease',44});45animation.opacity(0).step()46this.setData({47 ani: animation.export()48})49 },
这个动画有个小的bug,就是连续点击按钮动画时间会变快......
