小程序制作扭蛋机

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

这一步比较麻烦,需要调试扭蛋的位置和动画路径

/* 扭蛋机 */
.egg{
  width: 100%;
  position: absolute;
  z-index: 3;
  top: 260rpx;
}
.egg .egg_ji{
  width: 70%;
  margin-left: 15%;
  z-index: 3;
}
.egg .play{
  width: 80rpx;
  position: absolute;
  z-index: 4;
  top: 405rpx;
  left: 275rpx;
}
.egg .ball{
  width: 75rpx;
  position: absolute;
  z-index: 2;
}
.egg .ball_1{
  top: 290rpx;
  left: 300rpx;
}
.egg .ball_2{
  top: 295rpx;
  left: 360rpx;
}
.egg .ball_3{
  top: 260rpx;
  left: 240rpx;
}
.egg .ball_4{
  top: 260rpx;
  left: 420rpx;
}
.egg .ball_5{
  top: 230rpx;
  left: 280rpx;
}
.egg .ball_6{
  top: 230rpx;
  left: 340rpx;
}
.egg .ball_7{
  top: 220rpx;
  left: 390rpx;
}
.egg .ball_end{
  top: 410rpx;
  left: 390rpx;
}

.weiyi_1 {
 animation: around1 1.5s linear infinite;
}
.weiyi_2 {
 animation: around2 1.5s linear infinite;
}
.weiyi_3 {
 animation: around3 1.5s linear infinite;
} 
.weiyi_4 {
 animation: around4 1.5s linear infinite;
}
.weiyi_5 {
 animati