基于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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
微信小程序时间选择插件使用详解
Dec 28 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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中eval函数的危害与正确禁用方法
2014/06/30 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python退火算法在高次方程的应用
2018/07/26 Python
Pandas中resample方法详解
2019/07/02 Python
python根据时间获取周数代码实例
2019/09/30 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
Python 存取npy格式数据实例
2020/07/01 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
python3实现简单飞机大战
2020/11/29 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
英文留学推荐信范文
2014/01/25 职场文书
公司中秋节活动方案
2014/02/12 职场文书
社会工作专业求职信
2014/07/15 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
python字典进行运算原理及实例分享
2021/08/02 Python
python多次执行绘制条形图
2022/04/20 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL