微信小程序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

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

 /* 扭蛋机 */
 .egg{
   width: %;
   position: absolute;
   z-index: ;
   top: 260rpx;
 }
 .egg .egg_ji{
   width: %;
   margin-left: %;
   z-index: ;
 }
 .egg .play{
   width: 80rpx;
   position: absolute;
   z-index: ;
   top: 405rpx;
   left: 275rpx;
 }
 .egg .ball{
   width: 75rpx;
   position: absolute;
   z-index: ;
 }
 .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 .5s linear infinite;
 }
 .weiyi_2 {
  animation: around2 .5s linear infinite;
 }
 .weiyi_3 {
  animation: around3 .5s linear infinite;
 }
 .weiyi_4 {
  animation: around4 .5s linear infinite;
 }
 .weiyi_5 {
  animation: around5 .5s linear infinite;
 }
 .weiyi_6 {
  animation: around6 .5s linear infinite;
 }
 .weiyi_7 {
  animation: around7 .5s linear infinite;
 }
 .go{
   animation: around .3s linear ;
 }

 /* 位移 */
 @keyframes around{
   % {
  -webkit-transform: rotate(-180deg)
  }
 }

 @keyframes around1 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(-100rpx, -200rpx)
  }
  % {
  -webkit-transform: translate(40rpx, -280rpx)
  }
  % {
  -webkit-transform: translate(150rpx, -200rpx)
  }
  % {
  -webkit-transform: translate(150rpx, -50rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around2 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(100rpx, -200rpx)
  }
  % {
  -webkit-transform: translate(-20rpx, -280rpx)
  }
  % {
  -webkit-transform: translate(-150rpx, -200rpx)
  }
  % {
  -webkit-transform: translate(-150rpx, -50rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around3 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(180rpx, 10rpx)
  }
  % {
  -webkit-transform: translate(240rpx, -110rpx)
  }
  % {
  -webkit-transform: translate(100rpx, -240rpx)
  }
  % {
  -webkit-transform: translate(-50rpx, -130rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around4 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(-180rpx, 10rpx)
  }
  % {
  -webkit-transform: translate(-240rpx, -110rpx)
  }
  % {
  -webkit-transform: translate(-100rpx, -240rpx)
  }
  % {
  -webkit-transform: translate(50rpx, -130rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around5 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(40rpx, 70rpx)
  }
  % {
  -webkit-transform: translate(50rpx, -210rpx)
  }
  % {
  -webkit-transform: translate(-80rpx, -100rpx)
  }
  % {
  -webkit-transform: translate(190rpx, -50rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around6 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(-150rpx, -50rpx)
  }
  % {
  -webkit-transform: translate(130rpx, -140rpx)
  }
  % {
  -webkit-transform: translate(-110rpx, -180rpx)
  }
  % {
  -webkit-transform: translate(-130rpx, -20rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

 @keyframes around7 {
  % {
  -webkit-transform: translate(0rpx, 0rpx)
  }
  % {
  -webkit-transform: translate(80rpx, -50rpx)
  }
  % {
  -webkit-transform: translate(-180rpx, -100rpx)
  }
  % {
  -webkit-transform: translate(50rpx, -150rpx)
  }
  % {
  -webkit-transform: translate(-180rpx, -20rpx)
  }
  % {
  -webkit-transform: translate(, )
  }
 }

3.js

这一步要比css要是要简单的多,点击使动画动起来,调用api接口获取奖品就可以了

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     imgUrl: app.data.imgUrl,
     start : false,
     qiu: true,
   },

 /**
  * 点击扭蛋机
  */
   eggPlay(){
     let _this = this;

     _this.setData({
       start: true,
     })
     setTimeout(() => {
       _this.setData({
         start: false,
         qiu: false,
       })
       //球落下动画
       var animation = wx.createAnimation({
         duration: ,
         timingFunction: 'ease',
       });
       animation.opacity().step()
       this.setData({
         ani: animation.export()
       })
     }, );

     _this.setData({
       qiu: true
     })
     //将动画返回到开始位置
     var animation = wx.createAnimation({
       duration: ,
       timingFunction: 'ease',
     });
     animation.opacity().step()
     this.setData({
       ani: animation.export()
     })
   },

这个动画有个小的bug,就是连续点击按钮动画时间会变快,如果有更好的方法可以留言交流。