基于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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
javascript中call,apply,bind的区别详解
Dec 11 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
说说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 图片上传类代码
2009/07/17 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
解析PHP提交后跳转
2013/06/23 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
JS精确判断数据类型代码实例
2019/12/18 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python bisect模块原理及常见实例
2020/06/17 Python
python cookie反爬处理的实现
2020/11/01 Python
Django数据库迁移常见使用方法
2020/11/12 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
营业员演讲稿
2013/12/30 职场文书
大学生志愿者感言
2014/01/15 职场文书
初中班级口号
2014/06/09 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
初中成绩单评语
2014/12/29 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书