小程序大转盘抽奖 canvas animation

项目需求运用到大转盘可设置概率可直接自定义结果效果如下

两种方法及结合法

一通过canvas 实现但是因为定时器原因手机端卡顿严重故而最终使用了方法二但也是该记录下学习canvas

二通过小程序Api animation完成完美解决卡顿问题更精确定位有样式缺陷 css无法解决样式自动分配问题故结合一二两种方法出现第三种

三通过小程序Api animation 做动画旋转样式用canvas来实现完美解决各类问题

话不多说踩坑部分就不展示直接上第三种方法

创建动画区域（animation）动画可参考小程序官方API animationData动画参数在点击开始的时候填充数据

</view>

.wrapper-content{

background: #E0CFBC;

border-radius: 50%;

width: 720rpx;

height: 720rpx;

padding: 40rpx;

position: relative;

box-sizing: border-box;

z-index: 101;

}

.canvas-container {

margin: 0 auto;

position: absolute;

left: 40rpx;

top: 40rpx;

width: 640rpx;

height: 640rpx;

border-radius: 50%;

}

.canvas-content {

overflow: hidden;

box-sizing: content-box;

border: 20rpx solid #CDB193;

position: absolute;

left: 0;

top: 0;

z-index: 1;

display: block;

width: 600rpx;

height: 600rpx;

border-radius: inherit;

background-clip: padding-box;

}

定义canvas 画板区域设置ID

onReady: function(e) {

let that = this,

fps = 60,

awardsConfig = that.data.awardsConfig,

w = this.data.windowWidth / 750 * 600,

h = this.data.windowWidth / 750 * 600,

context = wx.createCanvasContext('canvas'),

//定义canvas位置

wheel = new Wheel(w / 2, w / 2, (w / 2) - 0, awardsConfig.slicePrizes),

animation = new Animation(wheel, { w: w, h: h });

wheel.prizeWidth = 30;

wheel.prizeHeight = 30;

// 更新动画

let update = function () {

// 清空

context.clearRect(0, 0, w, h);

// 画转盘

wheel.draw(context);

// 更新数据

animation.draw(context);

// 更新数据

animation.update();

// 绘图

context.draw()

};

setTimeout(update, 1000 / fps, 1000 / fps)

}

1.awardsConfig.slicePrizes为奖品列表因为大转盘是圆的所以W H 是一样的

2.this.data.windowWidth 是屏幕的宽度小程序有API 可以获取 600是设置的转盘内容（canvas）的rpx宽度用屏幕宽度/750*设置内容宽度rpx = 实际内容宽度的px 值

3.wheel是canvas绘制转盘的代码可自行修改参数

设置点击抽奖按钮两种方法一直接在canvas内绘制二在HTML里面通过定位实现

提供二 HTML 定位实现按钮

<view>

</view>

.canvas-btn {

display: flex;

flex-direction: column;

justify-content: space-around;

position: absolute;

left: 50%;

top: 50%;

margin-left: -110rpx;

margin-top: -110rpx;

z-index: 400;

width: 220rpx;

height: 220rpx;

border-radius: 50%;

color: #f4e9cc;

border: 10px solid #cdb193;

text-align: center;

font-size: 40rpx;

text-decoration: none;

box-sizing: border-box;

}

.canvas-btn>view {

position: absolute;

top: 7%;

left: 7%;

width: 86%;

height: 86%;

border-radius: 50%;

box-sizing: border-box;

padding: 22rpx 20rpx 0;

background: linear-gradient(134deg, rgba(232, 219, 197, 1) 0%, rgba(205, 177, 147, 1) 100%);

/* box-shadow:0px 5px 7px 0px rgba(255,255,255,1); */

margin: auto;

z-index: 102;

}

.canvas-btn::after {

position: absolute;

display: block;

content: ' ';

left: 39%;

top: -78%;

width: 0;

height: 0;

overflow: hidden;

border-width: 80rpx 20rpx 80rpx 20rpx;

border-style: solid;

border-color: transparent;

border-bottom-color: #ffab52;

}

getLottery() {

let that = this;

// 获取奖品配置

let awardsConfig = that.data.awardsConfig,

runNum = 12, len = awardsConfig.slicePrizes.length,

awardIndex = 0;

awardIndex = parseInt(Math.random() * 6)

console.log("奖品序号：" + awardIndex);

// 旋转抽奖

app.runDegs = app.runDegs || 0

app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / len))

//创建动画

let animationRun = wx.createAnimation({

duration: 4000,

timingFunction: 'ease'

})

console.log(awardsConfig.slicePrizes[awardIndex]);

that.animationRun = animationRun

animationRun.rotate(app.runDegs - (360 / len * 2 + (360 / len)) ).step()

that.setData({

animationData: animationRun.export()

})

点击按钮触发getLottery 进行动画数据填充实现旋转效果 runNum为旋转的圈数 awardIndex为中奖的序号

整体如此完美实现献上整体代码

html

</view>

<view>

</view>

CSS

.wrapper-content{

background: #E0CFBC;

border-radius: 50%;

width: 720rpx;

height: 720rpx;

padding: 40rpx;

position: relative;

box-sizing: border-box;

z-index: 101;

}

.canvas-container ul, .canvas-container li {

margin: 0;

padding: 0;

list-style: none;

}

.canvas-container {

margin: 0 auto;

position: absolute;

left: 40rpx;

top: 40rpx;

width: 640rpx;

height: 640rpx;

border-radius: 50%;

}

.canvas-container-quiu{

width: 20rpx;

height: 20rpx;

border-radius: 50%;

position: absolute;

left:10rpx;

top: 50%;

margin-top: -8rpx;

-webkit-transform-origin: 330rpx 50%;

transform-origin: 350rpx 50%;

z-index: 1001;

}

.canvas-content {

overflow: hidden;

box-sizing: content-box;

border: 20rpx solid #CDB193;

position: absolute;

left: 0;

top: 0;

z-index: 1;

display: block;

width: 600rpx;

height: 600rpx;

border-radius: inherit;

background-clip: padding-box;

}

.canvas-btn {

display: flex;

flex-direction: column;

justify-content: space-around;

position: absolute;

left: 50%;

top: 50%;

margin-left: -110rpx;

margin-top: -110rpx;

z-index: 400;

width: 220rpx;

height: 220rpx;

border-radius: 50%;

color: #f4e9cc;

border: 10px solid #cdb193;

text-align: center;

font-size: 40rpx;

text-decoration: none;

box-sizing: border-box;

}

.canvas-btn>view {

position: absolute;

top: 7%;

left: 7%;

width: 86%;

height: 86%;

border-radius: 50%;

box-sizing: border-box;

padding: 22rpx 20rpx 0;

background: linear-gradient(134deg, rgba(232, 219, 197, 1) 0%, rgba(205, 177, 147, 1) 100%);

/* box-shadow:0px 5px 7px 0px rgba(255,255,255,1); */

margin: auto;

z-index: 102;

}

.canvas-btn::after {

position: absolute;

display: block;

content: ' ';

left: 39%;

top: -78%;

width: 0;

height: 0;

overflow: hidden;

border-width: 80rpx 20rpx 80rpx 20rpx;

border-style: solid;

border-color: transparent;

border-bottom-color: #ffab52;

}

var app = getApp()

var utils = require('../../utils/utils.js');

var Animation = require('../../utils/Animation.js');

var Wheel = require('../../utils/Wheel.js');

Page({

/**

* 页面的初始数据

data: {

awardsList: {},

list: [],

statusBarHeight: getApp().globalData.statusBarHeight,

scrollHeight: 200,

windowWidth:0,

windowHeight:0,

awardsConfig: {

count: 50,

slicePrizes: [

{ text: "恭喜中大奖", img: "/assets/coupon_gold.png", title: "积分券x1", num: "1200", x: "1" },

{ text: "医疗服务费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "50", x: "2" },

{ text: "健康保养费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "500", x: "1" },

{ text: "谢谢参与", img: "/assets/coupon_gold.png", title: "积分券x3", num: "0", x: "2" },

{ text: "青春补偿费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "200", x: "1" },

{ text: "感恩奉献费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "100", x: "2" },

{ text: "咨询售后费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "150", x: "1" },

{ text: "谢谢参与", img: "/assets/coupon_gold.png", title: "积分券x1", num: "0", x: "1" }, { text: "咨询售后费", img: "/assets/coupon_gold.png", title: "积分券x1", num: "150", x: "1" },

{ text: "谢谢参与", img: "/assets/coupon_gold.png", title: "积分券x1", num: "0", x: "1" }

/**

* 生命周期函数--监听页面加载

onLoad: function(options) {

var that = this;

wx.getSystemInfo({

success: function (res) {

that.setData({

windowWidth: res.windowWidth,

windowHeight: res.windowHeight,

scrollHeight: res.windowHeight - res.windowWidth / 750 * (getApp().globalData.statusBarHeight * 2 + 98)

});

})

onReady: function(e) {

let that = this,

fps = 60, awardsConfig = that.data.awardsConfig,

w = this.data.windowWidth / 750 * 600,

h = this.data.windowWidth / 750 * 600,

context = wx.createCanvasContext('canvas'),

//定义canvas位置

wheel = new Wheel(w / 2, w / 2, (w / 2) - 0, awardsConfig.slicePrizes),

animation = new Animation(wheel, { w: w, h: h });

wheel.prizeWidth = 30;

wheel.prizeHeight = 30;

// 更新动画

let update = function () {

// 清空

context.clearRect(0, 0, w, h);

// 画转盘

wheel.draw(context);

// 更新数据

animation.draw(context);

// 更新数据

animation.update();

// 绘图

context.draw()

};

setTimeout(update, 1000 / fps, 1000 / fps)

wx.getSystemInfo({

success: function(res) {

that.setData({

contentHeight: res.windowHeight

});

})

that.setData({

count: awardsConfig.count

})

let len = awardsConfig.slicePrizes.length,

rotateDeg = 360 / len / 2 ,

list = [],

turnNum = 1 / len;

for (var i = 0; i < len; i++) {

list.push({

award: awardsConfig.slicePrizes[i].text,

});

};

that.setData({

list: list.concat(list)

});

/**

* 抽奖处理函数：

getLottery: function () {

let that = this;

// 获取奖品配置

let awardsConfig = that.data.awardsConfig,

runNum = 12, len = awardsConfig.slicePrizes.length,

awardIndex = 0;

awardIndex = parseInt(Math.random() * 6)

console.log("奖品序号：" + awardIndex);

// 旋转抽奖

app.runDegs = app.runDegs || 0

app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / len))

//创建动画

let animationRun = wx.createAnimation({

duration: 4000,

timingFunction: 'ease'

})

console.log(awardsConfig.slicePrizes[awardIndex]);

that.animationRun = animationRun

animationRun.rotate(app.runDegs - (360 / len * 2 + (360 / len)) ).step()

that.setData({

animationData: animationRun.export()

})

看完有问题可以评论觉得还可以的话点个赞谢谢相互交流

小程序 大转盘 抽奖 canvas animation

小程序大转盘抽奖 canvas animation