[wechat applet development (VI)] draw the circular progress bar of the music player

Demand background

We need to develop functions similar to Netease cloud player , Here we mainly explain the problem of the circular progress bar

---

The following figure is the final online rendering

---

One 、 Wechat applet does not support svg

Example ：pandas Is based on NumPy A tool of , The tool is created to solve data analysis tasks .

Two 、 Use canvas

1. Here is the code for drawing the circular progress bar

The code is as follows （ Example ）：

drawCanvasCircleByStep() {
    
    //  When the background player pauses, it will stop drawing 
    if (isNaN(wx.$globalData.backgroundAudioManager.duration)) {
    

      return;
    }
    //  Full of pictures  this.data.step 2  among  this.data.innerAudioContextStatus  Memory controls audio playback status  1  Playing 
    if(this.data.step >= 2 || this.data.innerAudioContextStatus != '1') {
    
      return;
    }
    //  Here we also control the rotation of the middle picture , In this way, you can control the rotation pause of the progress bar and the picture in the same method 
    this.data.ratateDeg = this.data.ratateDeg + 0.2;
    this.setData({
    
      ratateDeg: this.data.ratateDeg
    })
    // 2  multiply   Audio playback progress ratio 
    this.data.step = 2 * ((wx.$globalData.backgroundAudioManager.currentTime)/(wx.$globalData.backgroundAudioManager.duration));
    // console.log(this.data.step)
    if (!this.data.secondCanvas) {
     //  Some models do not support multiple creation   So only for the first time 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)
          //  Empty canvas before painting 
          ctx.clearRect(0, 0, this.data.secondCanvas.width, this.data.secondCanvas.height)
          ctx.lineWidth = 6;//  Set the width of the ring 
          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; //  Set the color of the ring 
          ctx.lineCap = '#A9B9D4' //  Set the shape of the end of the ring 
          ctx.beginPath();// Start a new path 
          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;
          //  Use  requestAnimationFrame  Recursive drawing 
          this.data.requestAnimationFrame = this.data.secondCanvas.requestAnimationFrame(this.drawCanvasCircleByStep)
        })
    } else {
    
      const ctx = this.data.secondCtx
      //  Empty canvas before painting 
      ctx.clearRect(0, 0, this.data.secondCanvas.width, this.data.secondCanvas.height)
      ctx.lineWidth = 6;//  Set the width of the ring 
      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; //  Set the color of the ring 
      ctx.lineCap = 'round' //  Set the shape of the end of the ring 
      ctx.beginPath();// Start a new path 
      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. Some Android models do not support gradients

The code is as follows （ Example ）：

gradient.addColorStop("0", "rgba(191, 204, 222, 1)");
gradient.addColorStop("1", "rgba(104, 129, 183, 1)");


ctx.strokeStyle = gradient; //  Set the color of the ring   Just change it to the pure color value here 

---

3. Deal with the timer in the page stay onUnload Middle clearance , Wechat applet has memory leak

onUnload:function(){
    
  if (this.timeupdateOnBackgourndAudio) {
    
    clearInterval(this.timeupdateOnBackgourndAudio)
  }
  //  Empathy setTimeout  Clear use  clearTimeout(timer);
},