【微信小程序开发（六）】绘制音乐播放器环形进度条

需求背景

需要开发类似于网易云播放器的功能，这里主要讲解环形进度条的问题

---

下图是最终上线的效果图

---

一、微信小程序不支持svg

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用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);
},