基于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 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
javascript数据类型详解
Feb 07 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
微信小程序实现animation动画
Jan 26 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
js调用网络摄像头的方法
Dec 05 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+MySQL的聊天室设计
2006/10/09 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
VUE重点问题总结
2018/03/19 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Django 实现图片上传和下载功能
2020/12/31 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
幼儿园八一建军节活动方案
2014/08/27 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
python如何进行基准测试
2021/04/26 Python
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python