1571137725714.jpg

效果圖如上圖所示，上篇文章分享了用css clip 實(shí)現(xiàn)圓盤(pán)loading。
但是由于動(dòng)畫(huà)效果有虛線和漸變，所以綜合考慮，選擇用canvas實(shí)現(xiàn)。

涉及知識(shí)點(diǎn)：

繪制圓?。?/h4>

CanvasContext.arc(number x, number y, number r, number sAngle, number eAngle, boolean counterclockwise)

下載.png

針對(duì) arc(100, 75, 50, 0, 1.5 * Math.PI)的三個(gè)關(guān)鍵坐標(biāo)如下：

綠色: 圓心 (100, 75)
紅色: 起始弧度 (0)
藍(lán)色: 終止弧度 (1.5 * Math.PI)

繪制虛線：

CanvasContext.setLineDash(Array.<number> pattern, number offset)

Array.<number> pattern
一組描述交替繪制線段和間距（坐標(biāo)空間單位）長(zhǎng)度的數(shù)字(虛線長(zhǎng)度與虛線間距)

number offset
虛線偏移量

繪制底部灰色背景儀表盤(pán)代碼：

drawBack:function(){
    ctx.beginPath();
    ctx.arc(120, 120, 110, (5 / 6) * Math.PI, (13 / 6) * Math.PI)
    ctx.strokeStyle = '#4e6a68';
    ctx.lineWidth = 8;
    ctx.setLineDash([0]);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(120, 120, 119, (5 / 6) * Math.PI, (13 / 6) * Math.PI)
    ctx.strokeStyle = '#4e6a68';
    ctx.lineWidth = 2;
    ctx.setLineDash([2, 12]);
    ctx.stroke();
    ctx.draw();
  },

繪制填充顏色代碼：

drawRight:function(start,end){
    now = start;
    let that = this;
    canvasInterval = setInterval(function () {
      if (now > end) {
        clearInterval(canvasInterval);
      } else {
        that.draw(now);
        now += (end-start)/(time/5);
      }
    }, 5);
  },
  drawLeft: function (start, end) {
    now = start;
    let that = this;
    canvasInterval = setInterval(function () {
      if (now < end) {
        clearInterval(canvasInterval);
      } else {
        that.draw(now);
        now -= (start - end) / (time / 5);
      }
    }, 5);
  },
  draw: function (now){
    //繪制背景底盤(pán)
    ctx.beginPath();
    ctx.arc(120, 120, 110, (5 / 6) * Math.PI, (13 / 6) * Math.PI)
    ctx.strokeStyle = '#4e6a68';
    ctx.lineWidth = 8;
    ctx.setLineDash([0]);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(120, 120, 119, (5 / 6) * Math.PI, (13 / 6) * Math.PI);
    ctx.strokeStyle = '#4e6a68';
    ctx.lineWidth = 2;
    ctx.setLineDash([2, 12]);
    ctx.stroke();
    
    //繪制填充顏色部分
    ctx.beginPath();
    ctx.strokeStyle = '#18c9b2';
    ctx.arc(120, 120, 110, (5 / 6) * Math.PI, now * Math.PI);
    ctx.lineWidth = 8;
    ctx.setLineDash([0]);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(120, 120, 119, (5 / 6) * Math.PI, now * Math.PI);
    ctx.lineWidth = 2;
    ctx.setLineDash([2, 12]);
    ctx.stroke();

    ctx.draw();
  },

time是為了和指針旋轉(zhuǎn)動(dòng)畫(huà)時(shí)間一致引入的參數(shù)。
指針動(dòng)畫(huà)直接用css即可實(shí)現(xiàn)。transform:rotate({{angle}}deg)

微信小程序下載文件有最大10M的限制，如果要進(jìn)行大文件下載需要平臺(tái)側(cè)進(jìn)行拆分