基于JS实现带动画效果的流程进度条


Posted in Javascript onJune 01, 2018

当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功。当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的。话不多说,我们开始打造吧。

    首先,我考虑的是使用canvas来打造这个控件,于是我现在demo.html里新建了一个canvas用来显示测试用,并且先预计了几个属性值,在做的过程中增增改改,最终属性如下:

<canvas id="myCanvas" width="800" height="100" style="background:#efefef" 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 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;

属性完成,开始使用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) 
  { 
    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")?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<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);

这样便完成了一个简单的带显示动画的流程进度条。最终效果如下:

基于JS实现带动画效果的流程进度条

具体控件使用以及源码,详见github:点击打开链接希望学习或有用到的童鞋star一下,感谢

总结

以上所述是小编给大家介绍的基于JS实现带动画效果的流程进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
说说node中的可读流和可写流的区别
Jun 01 #Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 #Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 #Javascript
详解vue-router 命名路由和命名视图
Jun 01 #Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 #Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
微信小程序登录换取token的教程
May 31 #Javascript
You might like
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
设备管理实施方案
2014/05/31 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
离婚协议书格式
2014/11/21 职场文书
前台接待岗位职责
2015/02/03 职场文书
公司市场部岗位职责
2015/04/15 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL