How to create animation effect process progress bar in JS-JS Tutorial-php.cn

This time I will show you how to make animation effect process with JSProgress bar, what are thenotesfor making animation effect process progress bar with JS, the following is a practical case, Let’s take a look.

When using a process, for example, there is an audit process, which has three stages: starting, auditing, and auditing successful. When in different stages, corresponding progress display is made. When displayed, it is displayed in the form of animation. Without further ado, let’s start building.

First of all, I considered using canvas to create this control, so I created a new canvas in demo.html to display for testing, and first estimated several attribute values. After additions and changes, the final attributes are as follows:

Copy after login

Then I started writing the corresponding js file, which I namedct_progress.js. My purpose is to create a display control that users can freely configure, so I defined some configurable properties:

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;//动画速度 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;

Copy after login

After the properties are completed, start using canvas and use these property values to start initial drawing:

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) { 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(); }

Copy after login

At this time, a static process progress bar with no progress is drawn. Then add the display animation to this progress bar:

var proW = 0;//进度长度 var progress = c.hasAttribute("dara-progress")?Number(c.getAttribute("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=showW) { clearInterval(int); } proW+=speed; }, 150);

Copy after login

This completes a simple process progress bar with display animation. The final effect is as follows:

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!