微信小程序 动画 大转盘 九宫格

luckydrawsqure.js

// pages/luckydraw/luckdrawsqure.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    circleList: [], // 圆点数组
    awardList: [], // 奖品数组
    colorCircleFirst: '#006000', // 圆点颜色1
    colorCircleSecond: '#E1E100', // 圆点颜色2
    colorAwardDefault: '#FFFFFF', // 奖品默认颜色
    colorAwardSelect: '#FF5151', // 奖品选中颜色
    indexSelect: 0, // 被选中的奖品index
    isRunning: false, // 是否正在抽奖
    imageAward: [
      '../../images/1.png',
      '../../images/2.png',
      '../../images/3.png',
      '../../images/4.png',
      '../../images/5.png',
      '../../images/6.png',
      '../../images/7.png',
      '../../images/8.png',
    ], // 奖品图片数组
  },

  // 开始游戏
  startGame: function() {
    if (this.data.isRunning) return
    this.setData({
      isRunning: true
    })
    var _this = this;
    var indexSelect = 0
    var i = 0;
    var timer = setInterval(function() {
      indexSelect++;

      // 通过随机数增加变化的波动
      i += 20 * Math.ceil(Math.random() * 10);

      if (i > 900) {
        // 去除循环
        clearInterval(timer);

        // 获奖提示
        wx.showModal({
          title: '恭喜您',
          content: '获得第' + (_this.data.indexSelect + 1) + "个优惠券",
          showCancel: false, // 去掉取消按钮
          success: function(res) {
            if (res.confirm) {
              _this.setData({
                isRunning: false
              })
            }
          }
        })
      }
      indexSelect = indexSelect % 8;
      _this.setData({
        indexSelect: indexSelect
      })
    }, (200 + i))
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var _this = this;
    // 圆点设置
    var leftCircle = 7.5;
    var topCircle = 7.5;
    var circleList = [];
    for (var i = 0; i < 24; i++) {
      if (i == 0) {
        topCircle = 15;
        leftCircle = 15;
      } else if (i < 6) {
        topCircle = 7.5;
        leftCircle = leftCircle + 102.5;
      } else if (i == 6) {
        topCircle = 15
        leftCircle = 620;
      } else if (i < 12) {
        topCircle = topCircle + 94;
        leftCircle = 620;
      } else if (i == 12) {
        topCircle = 565;
        leftCircle = 620;
      } else if (i < 18) {
        topCircle = 570;
        leftCircle = leftCircle - 102.5;
      } else if (i == 18) {
        topCircle = 565;
        leftCircle = 15;
      } else if (i < 24) {
        topCircle = topCircle - 94;
        leftCircle = 7.5;
      } else {
        return
      }
      circleList.push({
        topCircle: topCircle,
        leftCircle: leftCircle
      });
    }

    this.setData({
      circleList: circleList
    });

    // 圆点闪烁
    setInterval(function() {
      if (_this.data.colorCircleFirst == '#006000') {
        _this.setData({
          colorCircleFirst: '#E1E100',
          colorCircleSecond: '#006000',
        })
      } else {
        _this.setData({
          colorCircleFirst: '#006000',
          colorCircleSecond: '#E1E100',
        })
      }
    }, 500);

    // 奖品item设置
    var awardList = [];
    // 间距
    var topAward = 25;
    var leftAward = 25;
    for (var j = 0; j < 8; j++) {
      if (j == 0) {
        topAward = 25;
        leftAward = 25;
      } else if (j < 3) {
        topAward = topAward;
        // 166.6666是宽,15是间距
        leftAward = leftAward + 166.6666 + 15;
      } else if (j < 5) {
        leftAward = leftAward;
        // 150是高,15是间距
        topAward = topAward + 150 + 15;
      } else if (j < 7) {
        leftAward = leftAward - 166.6666 - 15;
        topAward = topAward;
      } else if (j < 8) {
        leftAward = leftAward;
        topAward = topAward - 150 - 15;
      }
      var imageAward = this.data.imageAward[j];
      awardList.push({
        topAward: topAward,
        leftAward: leftAward,
        imageAward: imageAward
      });
    }

    this.setData({
      awardList: awardList
    });

  }
})

luckydrawsqure.wxml

<!--pages/luckydraw/luckdrawsqure.wxml-->
<view class="container-out">
  <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
  <view class="container-in">
    <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
      <image class="award-image" src="{{item.imageAward}}"></image>
    </view>
    <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">开始</view>
  </view>
</view>

luckydrawsqure.wxss

/* pages/luckydraw/luckdrawsqure.wxss */

.container-out {
  height: 600rpx;
  width: 650rpx;
  background-color: #f30a0a;
  margin: 100rpx auto;
  border-radius: 40rpx;
  position: relative;
}

.container-in {
  width: 580rpx;
  height: 530rpx;
  background-color: #f6f0f7;
  border-radius: 40rpx;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 20rpx;
  width: 20rpx;
}

.content-out {
  position: absolute;
  height: 150rpx;
  width: 166.6666rpx;
  background-color: #f5f0fc;
  border-radius: 15rpx;
}

.start-btn {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 15rpx;
  height: 150rpx;
  width: 166.6666rpx;
  background-color: #ffe400;
  box-shadow: 0 5px 0 #e7930a;
  color: #f6251e;
  text-align: center;
  font-size: 55rpx;
  font-weight: bolder;
  line-height: 150rpx;
}

.award-image {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 140rpx;
  width: 130rpx;
}