基于JS实现带动画效果的流程进度条
当在使⽤流程的时候，⽐如有⼀个审核流程，有三个阶段：开始，审核中，审核成功。当在不同的阶段，做相应的进度显⽰，当显⽰时，是以动画的形式显⽰的。话不多说，我们开始打造吧。
⾸先，我考虑的是使⽤canvas来打造这个控件，于是我现在demo.html⾥新建了⼀个canvas⽤来显⽰测试⽤，并且先预计了⼏个属性值，在做的过程中增增改改，最终属性如下：
<canvas id="myCanvas" width="800" height="100" data-show="开始|审核中|预审核|结束" data-font-size="16"
data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10">
您的浏览器不⽀持 HTML5 canvas 标签。</canvas>
然后开始编写相应的js⽂件，我将其命名为ct_progress.js。我的⽬的是打造⼀款使⽤者可以⾃由配置的显⽰控件，于是定义了⼀下可配置的属性：
var ElementById("myCanvas");
var showStr = c.getAttribute("data-show");
var showStrs = showStr.split("|");
var r = c.hasAttribute("data-r")?Attribute("data-r")):15;
var Context("2d");
var padding = c.hasAttribute("data-padding")?Attribute("data-padding")):10;//左右上的间隔
var space = (c.getAttribute("width")-2*r-2*padding)/(showStrs.length-1);
var speed = c.hasAttribute("data-speed")?Attribute("data-speed")):20;//动画速度
var fillColour = c.hasAttribute("data-fill-colour")?c.getAttribute("data-fill-colour"):"#ffff00";//填充⾊
var fontSize = c.hasAttribute("data-font-size")?Attribute("data-font-size")):15;
属性完成，开始使⽤canvas使⽤这些属性值开始进⾏初始化画图：
for(var i in showStrs)
{
ctx.beginPath();
ctx.fillStyle="#ffffff";
ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前⾯两个参数为圆⼼坐标，第三个为半径，第四个为起始⾓。第五个为结束⾓
ctx.fill();
if(i!=0)
canvas动画{
ctx.fillRect(r+(i-1)*space+padding,r/2+padding,space,r);//前⾯两个左上⾓坐标，后⾯两个宽⾼
}
ctx.beginPath();
ctx.fillStyle="#333333";
ctx.font=fontSize+"px Georgia";//⼀定要指定字体否则⼤⼩没有⽤
ctx.fillText(showStrs[i],r+i*space-r+padding,r*2+fontSize+10+padding);//左下⾓为起点
ctx.stroke();
}
此时画出了⼀个静态的没有进度的流程进度条。然后为这个进度条加上显⽰时的动画：
var proW = 0;//进度长度
var progress = c.hasAttribute("dara-progress")?Attribute("dara-progress")):showStrs.length;//
var showW = space*progress;//计算应该显⽰的进度长度
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);//前⾯两个左上⾓坐标，后⾯两个宽⾼
//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);//前⾯两个左上⾓坐标，后⾯两个宽⾼
}
}
//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);//前⾯两个参数为圆⼼坐标，第三个为半径，第四个为起始⾓。第五个为结束⾓
ctx.fill();
if(proW>=showW)
{
clearInterval(int);
}
proW+=speed;
}, 150);
这样便完成了⼀个简单的带显⽰动画的流程进度条。最终效果如下：
具体控件使⽤以及源码，详见github：希望学习或有⽤到的童鞋star⼀下，感谢
总结
以上所述是⼩编给⼤家介绍的基于JS实现带动画效果的流程进度条，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。