微信小程序 动画 大转盘 圆盘

luckydraw.js

// 引入配置文件config
const urlList = require('../../utils/config.js');

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    awardsList: {},
    animationData: {},
    btnDisabled: ''
  },

  /**
   * 执行抽奖
   */
  getLucky: function () {
    var that = this;
    var awardIndex = Math.random() * 6 >>> 0;

    // 获取奖品配置
    var awardsConfig = app.awardsConfig;
    var runNum = 8;

    if (awardIndex < 0) {
      awardsConfig.chance = false;
    }

    console.log(awardIndex);

    // 旋转抽奖
    app.runDegs = app.runDegs || 0;
    console.log('deg', app.runDegs);
    app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6));
    console.log('deg', app.runDegs);

    var animationRun = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease'
    });

    that.animationRun = animationRun;
    animationRun.rotate(app.runDegs).step();

    that.setData({
      animationData: animationRun.export(),
      btnDisabled: 'disabled'
    });

    // 记录奖品
    var winAwards = wx.getStorageSync('winAwards') || { data: [] };

    winAwards.data.push(awardsConfig.awards[awardIndex].name + '1个');

    wx.setStorageSync('winAwards', winAwards);

    // 中奖提示
    setTimeout(function () {
      wx.showModal({
        title: '恭喜',
        content: '获得' + (awardsConfig.awards[awardIndex].name),
        showCancel: false
      });
      if (awardsConfig.chance) {
        that.setData({
          btnDisabled: ''
        })
      };
    }, 4000);

  },

  /**
   * 查看抽奖
   */
  gotoLucky: function () {
    
    /*
    wx.switchTab({
      url: '../luck/gotoLucky'
    })
    */
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;

    // getAwardsConfig
    app.awardsConfig = {
      chance: true,
      awards: [
        { 'index': 0, 'name': '1元红包' },
        { 'index': 1, 'name': '3元话费' },
        { 'index': 2, 'name': '5元红包' },
        { 'index': 3, 'name': '7元红包' },
        { 'index': 4, 'name': '9元话费' },
        { 'index': 5, 'name': '11元红包' }
      ]
    }

    // 绘制转盘
    var awardsConfig = app.awardsConfig.awards;
    var len = awardsConfig.length;
    var rotateDeg = 360 / len / 2 + 90;
    var html = [];
    var turnNum = 1 / len;  // 文字旋转 turn 值
    
    that.setData({
      btnDisabled: app.awardsConfig.chance ? '' : 'disabled'
    });

    var ctx = wx.createContext();

    for (var i = 0; i < len; i++) {
      // 保存当前状态
      ctx.save();
      // 开始一条新路径
      ctx.beginPath();
      // 位移到圆心，下面需要围绕圆心旋转
      ctx.translate(150, 150);
      // 从(0, 0)坐标开始定义一条新的子路径
      ctx.moveTo(0, 0);
      // 旋转弧度，需将角度转换为弧度，使用 degrees * Math.PI/180 公式进行计算。
      ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
      // 绘制圆弧
      ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);

      // 颜色间隔
      if (i % 2 == 0) {
        ctx.setFillStyle('rgba(255,184,32,.1)');
      } else {
        ctx.setFillStyle('rgba(255,203,63,.1)');
      }

      // 填充扇形
      ctx.fill();
      // 绘制边框
      ctx.setLineWidth(0.5);
      ctx.setStrokeStyle('rgba(228,55,14,.1)');
      ctx.stroke();

      // 恢复前一个状态
      ctx.restore();

      // 奖项列表
      html.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awardsConfig[i].name });
    }

    that.setData({
      awardsList: html
    });

  }
})

luckydraw.wxml

<!--pages/luckydraw/luckydraw.wxml-->
<view class="wrapper">

  <view class="header">
    <text class="header-title"> 大转盘抽奖 </text>
    <text class="header-subtitle"> 谁是幸运星 </text>
  </view>

  <view class="main">
    <view class="canvas-container">
      <view animation="{{animationData}}" class="canvas-content">
        <canvas style="width: 300px; height: 300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas>

        <view class="canvas-line">
          <view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view>
        </view>

        <view class="canvas-list">
          <view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
            <view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view>
          </view>
        </view>


      </view>

      <view bindtap="getLucky" class="canvas-btn {{btnDisabled}}">抽奖</view>
    </view>

    <view class="main-container">
      <view class="main-container-btn">
        <button bindtap="gotoLucky" type="primary">查看中奖</button>
      </view>
      <view class="main-container-rule">
        <text class="main-rule-title">活动规则：</text>
        <text class="main-rule-item">1、规则1</text>
        <text class="main-rule-item">2、规则1</text>
      </view>
    </view>

  </view>

</view>

luckydraw.wxss

/* pages/luckydraw/luckydraw.wxss */

page {
  background: #fff;
}

.header {
  padding: 1rem 0;
  text-align: center;
}

.header-title {
  display: block;
  padding: 0.4rem 0;
  font-size: 2rem;
}

.header-subtitle {
  color: #999;
}

/* 转盘 */

.canvas-container ul, .canvas-container li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.canvas-container {
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  /*border: 2px solid #E44025;*/
  box-shadow: 0 2px 3px #333, 0 0 2px #000;
}

.canvas-content {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 300px;
  height: 300px;
  border-radius: inherit;
  background-clip: padding-box;
  background-color: #ffcb3f;
}

.canvas-element {
  position: relative;
  z-index: 1;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

.canvas-list {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 9999;
}

.canvas-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #e4370e;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

.canvas-item-text {
  position: relative;
  display: block;
  padding-top: 20px;
  /* width: 50px; */
  margin: 0 auto;
  text-align: center;
  -webkit-transform-origin: 50% 150px;
  transform-origin: 50% 150px;
}

/* 分隔线 */

.canvas-line {
  position: absolute;
  left: 0;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 99;
}

.canvas-litem {
  position: absolute;
  left: 150px;
  top: 0;
  width: 1px;
  height: 150px;
  background-color: rgba(228, 55, 14, 0.4);
  overflow: hidden;
  -webkit-transform-origin: 50% 150px;
  transform-origin: 50% 150px;
}

.canvas-btn {
  position: absolute;
  left: 110px;
  top: 110px;
  z-index: 400;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #f4e9cc;
  background-color: #e44025;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.canvas-btn::after {
  position: absolute;
  display: block;
  content: ' ';
  left: 10px;
  top: -46px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 30px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #e44025;
}

.canvas-btn.disabled {
  pointer-events: none;
  background: #b07a7b;
  color: #ccc;
}

.canvas-btn.disabled::after {
  border-bottom-color: #b07a7b;
}

.gb-run {
  -webkit-transition: all 6s ease;
  transition: all 6s ease;
}

/* 查看中奖 */

.main-container {
  margin: 1rem 2rem;
}

.main-container-rule {
  padding: 1rem 0;
}

.main-rule-title {
  display: block;
  padding: 4px 0;
  font-size: 16px;
  font-weight: bold;
}

.main-rule-item {
  display: block;
  padding: 2px 0;
}