快捷導(dǎo)航

基于JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條

更新時(shí)間：2018年06月01日 09:46:13 作者：趙寶寶在不在

當(dāng)在使用流程的時(shí)候，比如有一個(gè)審核流程，有三個(gè)階段：開始，審核中，審核成功。當(dāng)在不同的階段，做相應(yīng)的進(jìn)度顯示，當(dāng)顯示時(shí)，是以動(dòng)畫的形式顯示的。下面通過代碼給大家介紹JS實(shí)現(xiàn)帶動(dòng)畫效果的流程進(jìn)度條，感興趣的朋友一起看看吧

當(dāng)在使用流程的時(shí)候，比如有一個(gè)審核流程，有三個(gè)階段：開始，審核中，審核成功。當(dāng)在不同的階段，做相應(yīng)的進(jìn)度顯示，當(dāng)顯示時(shí)，是以動(dòng)畫的形式顯示的。話不多說，我們開始打造吧。

首先，我考慮的是使用canvas來打造這個(gè)控件，于是我現(xiàn)在demo.html里新建了一個(gè)canvas用來顯示測(cè)試用，并且先預(yù)計(jì)了幾個(gè)屬性值，在做的過程中增增改改，最終屬性如下：

<canvas id="myCanvas" width="800" height="100" style="background:#efefef" data-show="開始|審核中|預(yù)審核|結(jié)束" data-font-size="16" 
    data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10"> 
  您的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas>

然后開始編寫相應(yīng)的js文件，我將其命名為ct_progress.js。我的目的是打造一款使用者可以自由配置的顯示控件，于是定義了一下可配置的屬性：

var c=document.getElementById("myCanvas"); 
var showStr = c.getAttribute("data-show"); 
var showStrs = showStr.split("|"); 
var r = c.hasAttribute("data-r")?Number(c.getAttribute("data-r")):15; 
var ctx=c.getContext("2d"); 
var padding = c.hasAttribute("data-padding")?Number(c.getAttribute("data-padding")):10;//左右上的間隔 
var space = (c.getAttribute("width")-2*r-2*padding)/(showStrs.length-1); 
var speed = c.hasAttribute("data-speed")?Number(c.getAttribute("data-speed")):20;//動(dòng)畫速度 
var fillColour = c.hasAttribute("data-fill-colour")?c.getAttribute("data-fill-colour"):"#ffff00";//填充色 
var fontSize = c.hasAttribute("data-font-size")?Number(c.getAttribute("data-font-size")):15;

屬性完成，開始使用canvas使用這些屬性值開始進(jìn)行初始化畫圖：

for(var i in showStrs) 
{ 
  ctx.beginPath(); 
  ctx.fillStyle="#ffffff"; 
  ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面兩個(gè)參數(shù)為圓心坐標(biāo)，第三個(gè)為半徑，第四個(gè)為起始角。第五個(gè)為結(jié)束角 
  ctx.fill(); 
  if(i!=0) 
  { 
    ctx.fillRect(r+(i-1)*space+padding,r/2+padding,space,r);//前面兩個(gè)左上角坐標(biāo)，后面兩個(gè)寬高 
  } 
  ctx.beginPath(); 
  ctx.fillStyle="#333333"; 
  ctx.font=fontSize+"px Georgia";//一定要指定字體否則大小沒有用 
  ctx.fillText(showStrs[i],r+i*space-r+padding,r*2+fontSize+10+padding);//左下角為起點(diǎn) 
  ctx.stroke(); 
}

此時(shí)畫出了一個(gè)靜態(tài)的沒有進(jìn)度的流程進(jìn)度條。然后為這個(gè)進(jìn)度條加上顯示時(shí)的動(dòng)畫：

var proW = 0;//進(jìn)度長(zhǎng)度 
var progress = c.hasAttribute("dara-progress")?Number(c.getAttribute("dara-progress")):showStrs.length;// 
var showW = space*progress;//計(jì)算應(yīng)該顯示的進(jìn)度長(zhǎng)度 
var i=0,j; 
var int = setInterval(function () { 
  //清除 
  //ctx.clearRect(0, 0, c.width, c.height);//不清除在原圖上畫了覆蓋 
  j=i; 
  i = parseInt(proW/space); 
  if(i>j) 
  { 
    ctx.beginPath(); 
    ctx.fillStyle=fillColour; 
    ctx.fillRect(r+j*space+padding,r/2+padding,space,r);//前面兩個(gè)左上角坐標(biāo)，后面兩個(gè)寬高 
    //clearArc(ctx,r+j*space+padding,r+padding,r,1);//清除圓部 
  } 
  else 
  { 
    if(i<progress) 
    { 
      ctx.beginPath(); 
      ctx.fillStyle=fillColour; 
      ctx.fillRect(r+i*space+padding,r/2+padding,proW-i*space,r);//前面兩個(gè)左上角坐標(biāo)，后面兩個(gè)寬高 
    } 
  } 
  //clearArc(ctx,r+i*space+padding,r+padding,r,1);//清除圓部 
  ctx.beginPath(); 
  ctx.fillStyle=fillColour; 
  ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面兩個(gè)參數(shù)為圓心坐標(biāo)，第三個(gè)為半徑，第四個(gè)為起始角。第五個(gè)為結(jié)束角 
  ctx.fill(); 
  if(proW>=showW) 
  { 
    clearInterval(int); 
  } 
  proW+=speed; 
}, 150);

這樣便完成了一個(gè)簡(jiǎn)單的帶顯示動(dòng)畫的流程進(jìn)度條。最終效果如下：