基于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的Boolean对象初始值示例
Mar 04 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
JavaScript中AOP的实现与应用
May 06 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
js实现微信聊天界面
Aug 09 Javascript
js实现飞机大战小游戏
Aug 26 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
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
JavaScript confirm选择判断
2008/10/18 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python算法之图的遍历
2017/11/16 Python
Python入门之后再看点什么好?
2018/03/05 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
食堂卫生管理制度
2015/08/04 职场文书
升学宴家长答谢词
2015/09/29 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python