基于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 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
解决Vue动态加载本地图片问题
Oct 09 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
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
javascript读取xml
2006/11/04 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
python读取注册表中值的方法
2013/04/08 Python
详解Python中break语句的用法
2015/05/14 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
Python流程控制 if else实现解析
2019/09/02 Python
详解Python中的分支和循环结构
2020/02/11 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
导游实习生自荐书
2014/01/28 职场文书
实践单位评语
2014/04/26 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
白岩松演讲
2014/05/21 职场文书
员工安全承诺书
2014/05/22 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书