需求背景
需要开发类似于网易云播放器的功能,这里主要讲解环形进度条的问题
下图是最终上线的效果图
文章目录
一、微信小程序不支持svg
二、使用canvas
1.这里主要放绘制环形进度条的代码
代码如下(示例):
drawCanvasCircleByStep() {
// 背景播放器暂停进度结束就不画了
if (isNaN(wx.$globalData.backgroundAudioManager.duration)) {
return;
}
// 画满是 this.data.step 2 其中 this.data.innerAudioContextStatus 内存控制音频播放状态 1 正在播放
if(this.data.step >= 2 || this.data.innerAudioContextStatus != '1') {
return;
}
// 这里同时控制中间图片的旋转,这样可以在同一个方法中控制进度条和图片的旋转暂停
this.data.ratateDeg = this.data.ratateDeg + 0.2;
this.setData({
ratateDeg: this.data.ratateDeg
})
// 2 乘以 音频播放进度比例
this.data.step = 2 * ((wx.$globalData.backgroundAudioManager.currentTime)/(wx.$globalData.backgroundAudioManager.duration));
// console.log(this.data.step)
if (!this.data.secondCanvas) { // 部分机型不支持多次创建 所以只有第一次getContext
const query = wx.createSelectorQuery()
query.select('#canvasProgressbg2')
.fields({ node: true, size: true })
.exec((res) => {
this.data.secondCanvas = res[0].node
const ctx = this.data.secondCanvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
this.data.secondCanvas.width = 500 * dpr
this.data.secondCanvas.height = 500 * dpr
ctx.scale(dpr, dpr)
// 绘制前清空画布
ctx.clearRect(0, 0, this.data.secondCanvas.width, this.data.secondCanvas.height)
ctx.lineWidth = 6;// 设置圆环的宽度
var gradient = ctx.createLinearGradient(500, 250, 250, 500);
gradient.addColorStop("0", "rgba(191, 204, 222, 1)");
gradient.addColorStop("1", "rgba(104, 129, 183, 1)");
ctx.strokeStyle = gradient; // 设置圆环的颜色
ctx.lineCap = '#A9B9D4' // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(250, 250, 484/2, -Math.PI / 2, this.data.step * Math.PI - Math.PI / 2);
ctx.stroke();
ctx.closePath();
this.data.secondCtx = ctx;
// 使用 requestAnimationFrame 递归绘制
this.data.requestAnimationFrame = this.data.secondCanvas.requestAnimationFrame(this.drawCanvasCircleByStep)
})
} else {
const ctx = this.data.secondCtx
// 绘制前清空画布
ctx.clearRect(0, 0, this.data.secondCanvas.width, this.data.secondCanvas.height)
ctx.lineWidth = 6;// 设置圆环的宽度
var gradient = ctx.createLinearGradient(500, 250, 250, 500);
gradient.addColorStop("0", "rgba(191, 204, 222, 1)");
gradient.addColorStop("1", "rgba(104, 129, 183, 1)");
ctx.strokeStyle = gradient; // 设置圆环的颜色
ctx.lineCap = 'round' // 设置圆环端点的形状
ctx.beginPath();//开始一个新的路径
ctx.arc(250, 250, 484/2, -Math.PI / 2, this.data.step * Math.PI - Math.PI / 2);
ctx.stroke();
ctx.closePath();
this.data.requestAnimationFrame = this.data.secondCanvas.requestAnimationFrame(this.drawCanvasCircleByStep)
}
},
2. 部分机型安卓不支持渐变
代码如下(示例):
gradient.addColorStop("0", "rgba(191, 204, 222, 1)");
gradient.addColorStop("1", "rgba(104, 129, 183, 1)");
ctx.strokeStyle = gradient; // 设置圆环的颜色 这里直接改为纯色值就好了
3. 处理好页面中的定时器 在onUnload中清除,微信小程序有内存泄漏
onUnload:function(){
if (this.timeupdateOnBackgourndAudio) {
clearInterval(this.timeupdateOnBackgourndAudio)
}
// 同理setTimeout 清除使用 clearTimeout(timer);
},