小程序小记3：最简单的转盘抽奖小程序

转盘抽奖在营销活动中是最常见的了。不论是H5或者小程序都会使用Canvas来实现，这里就给大家介绍一下，如何不用Canvas轻松实现转盘大抽奖小程序。

使用到的技术：微信小程序动画效果API（H5类似）

一、项目结构和效果如下：
（动态效果体验，微信搜索“程序盒子Store”）

二、开发者新建一个目录和Page，将对应源码拷贝进文件即可
展示层：zp.wxml

	
		 转盘抽奖源码体验 
		 点击抽奖获得红包  
	

	
		
			
				
					
				
 
				
					
				  		{{item.award}}
					
				
			
      
			抽奖		
		
	

逻辑层：zp.js

var util = require("../../utils/util.js");
var app = getApp();

Page({

  //奖品配置
  awardsConfig: {
    chance: true,
    awards: [
      { 'index': 0, 'name': '1元红包' },
      { 'index': 1, 'name': '5元话费' },
      { 'index': 2, 'name': '6元红包' },
      { 'index': 3, 'name': '8元红包' },
      { 'index': 4, 'name': '10元话费' },
      { 'index': 5, 'name': '10元红包' }
    ]
  },

  data: {
    awardsList: {},
    animationdata: {},
    btnDisabled: '',
  },

  onReady: function (e) {
    this.drawAwardRoundel();

    //分享
    wx.showShareMenu({
      withShareTicket: true
    });
  },

  //画抽奖圆盘
  drawAwardRoundel: function () {
    var awards = this.awardsConfig.awards;
    var awardsList = [];
    var turnNum = 1 / awards.length;  // 文字旋转 turn 值

    // 奖项列表
    for (var i = 0; i < awards.length; i++) {
      awardsList.push({ turn: i * turnNum + 'turn', lineTurn: i * turnNum + turnNum / 2 + 'turn', award: awards[i].name });
    }

    this.setData({
      btnDisabled: this.awardsConfig.chance ? '' : 'disabled',
      awardsList: awardsList
    });
  },

  //发起抽奖
  playReward: function () {
    //中奖index
    var awardIndex = 2;
    var runNum = 8;//旋转8周
    var duration = 4000;//时长

    // 旋转角度
    this.runDeg = this.runDeg || 0;
    this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / 6))
    //创建动画
    var animationRun = wx.createAnimation({
      duration: duration,
      timingFunction: 'ease'
    })
    animationRun.rotate(this.runDeg).step();
    this.setData({
      animationdata: animationRun.export(),
      btnDisabled: 'disabled'
    });

    // 中奖提示
    var awardsConfig = this.awardsConfig;
    setTimeout(function () {
      wx.showModal({
 title: '恭喜',
 content: '获得' + (awardsConfig.awards[awardIndex].name),
 showCancel: false
      });
      this.setData({
 btnDisabled: ''
      });
    }.bind(this), duration);

  },

  onShareAppMessage: function () {
    var that = this;
    return util.doShare("大转盘抽奖", "pages/zp/zp",that);
  }

})

样式：zp.wxss

page {
  background: #fff;
}


.canvas-container {
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  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;
  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;
}

三、源码也可以从这里下载：
链接：https://pan.baidu.com/s/1IBdvbXRbmq74PSeqPe6MUQ
密码：9tac
如有问题，联系微信：qicong88