当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功。当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的。话不多说,我们开始打造吧。
,,,首先,我考虑的是使用帆布来打造这个控件,于是我现在里替换成新建了一个帆布用来显示测试用,并且先预计了几个属性值,在做的过程中增增改的改,最终属性如下:
& lt;帆布id=" myCanvas "宽度=" 800 "高度=" 100 "数据显示=翱紎审核中|预审核|结束”data-font-size=?6”
data-r=" 15 " dara-progress=" 3 "数据传输速度=?0”data-fill-colour=" # ffff00 " data-padding=?0”比;
您的浏览器不支持HTML5画布标签。;/canvas>之前
然后开始编写相应的js文件,我将其命名为<代码> ct_progress.js>
var c=. getelementbyid (“myCanvas”);
var showStr=c.getAttribute(“数据显示”);
var showStrs=showStr.split (“|”);
var r=c.hasAttribute (data-r) & # 63;数量(c.getAttribute (“data-r”)): 15;
var ctx=c.getContext (2 d);
var填充=c.hasAttribute (data-padding) & # 63;数量(c.getAttribute (“data-padding”)): 10;//左右上的间隔
var空间=(c.getAttribute(“宽度”)2 * r2 *填充)/(showStrs.length-1);
var速度=c.hasAttribute(数据速率)& # 63;数量(c.getAttribute(数据速率)):20;//动画速度
var fillColour=c.hasAttribute (data-fill-colour) & # 63; c.getAttribute (“data-fill-colour”):“# ffff00”;//填充色
var字形大?c.hasAttribute (data-font-size) & # 63;数量(c.getAttribute (“data-font-size”)): 15;之前
属性完成,开始使用帆布使用这些属性值开始进行初始化画图:
为我在showStrs (var)
{
ctx.beginPath ();
ctx.fillStyle=" # ffffff”;
ctx.arc (r +我*空间+填充,r +填充,r, 0, 2 * Math.PI);//前面两个参数为圆心坐标,第三个为半径,第四个为起始角。第五个为结束角
ctx.fill ();
如果(我!=0)
{
ctx.fillRect (r +(张)*空间+填充,r/2 +填充空间,r);//前面两个左上角坐标,后面两个宽高
}
ctx.beginPath ();
ctx.fillStyle=" # 333333”;
ctx。字体=字形大小+“px格鲁吉亚”;//一定要指定字体否则大小没有用
ctx.fillText (showStrs[我],r +我* space-r +填充,r * 2 +字形大小+ 10 +填充);//左下角为起点
ctx.stroke ();
}
此时画出了一个静态的没有进度的流程进度条。然后为这个进度条加上显示时的动画:
var船首=0;//进度长度
var=c.hasAttribute进展(dara-progress) & # 63;数量(c.getAttribute (“dara-progress”)): showStrs.length;//var showW=空间*进展;//计算应该显示的进度长度
var=0, j。
var int=setInterval(函数(){//清除//ctx。clearRect (0, 0, c。宽度,c.height);//不清除在原图上画了覆盖
j=我;
i=方法(船首/空间);
如果(i> j)
{
ctx.beginPath ();
ctx.fillStyle=fillColour;
ctx.fillRect (r + j *空间+填充,r/2 +填充空间,r);//前面两个左上角坐标,后面两个宽高//clearArc (ctx, r + j *空间+填充、r +填充,r, 1);//清除圆部
}
其他的
{
如果(i<进展)
{
ctx.beginPath ();
ctx.fillStyle=fillColour;
ctx.fillRect (r +我*空间+填充,r/2 +填充,proW-i *空间,r);//前面两个左上角坐标,后面两个宽高
}
}//clearArc (ctx, r +我*空间+填充,r +填充,r, 1);//清除圆部
ctx.beginPath ();
ctx.fillStyle=fillColour;
ctx.arc (r +我*空间+填充,r +填充,r, 0, 2 * Math.PI);//前面两个参数为圆心坐标,第三个为半径,第四个为起始角。第五个为结束角
ctx.fill ();
如果(proW>=showW)
{
clearInterval (int);
}
船首+=速度;
},150);之前
这样便完成了一个简单的带显示动画的流程进度条。最终效果如下:
具体控件使用以及源码,详见github:点击打开链接希望学习或有用到的童鞋明星一下,感谢
以上所述是小编给大家介绍的基于JS实现带动画效果的流程进度条,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
