很实用的进度条插件ProgressBar.js ProgressBar.js配置参数详解

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

很实用的进度条插件ProgressBar.js ProgressBar.js配置参数详解

我是小助手 2018-07-12 11:43:53 浏览3169
展开阅读全文

1,介绍

它是响应式的创建SVG元素的一个插件。不要慌,不懂SVG也没有关系,插件的使用,主要是对配置参数的理解。

  • 这是ProgressBar.js的网站,有动效的展示(我截的静态的图。。。),在如下图所示,右击小铅笔,在新的页面中打开网页,就可以看到小demo的全部代码了。

4e27b341ad8c77ed41a05c3eba112020b2848d32

  • 这是官方配置参数的文档,我会在下面的代码中,详解。
  • 进度条的效果,常见的就是长条形和圆形。当然也可以自定义形状,这里就不做讨论了。

2,案例

下面的2个demo,一个是实现的长条形的,一个是圆形,因为配置参数有所不同,所以分开介绍。

2.1 长条形

3ee668b4c5902a421ce009ebba809f857f05cc74

<!--首先,需要引入插件-->
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>
  // 获取容器节点
  let container = document.querySelector('#container')
  
  /*
  * 先介绍稍微难理解的参数
  * 首先,进度条的实现,要有一个准备填充的矩形作为背景被填充,还要有一个进行填充的矩形。
  *   所以,两个矩形肯定是重叠在一起的。而这些生成的矩形,就是以SVG元素的形式显示。
  * @strokeWidth 跟踪路径,指慢慢边长,进行填充的那个矩形。
  * @trailWidth 未填充路径,指作为背景被填充的矩形。
  * @svgStyle SVG元素(2个矩形)面积占容器的百分比。
  * */

  /*
  * 结论先行:一般显示的效果,strokeWidth和trailWidth这2个的值,只需要设置strokeWidth: 1 即可。
  * 原因:
  * strokeWidth的值number类型,表示跟路径的高度占容器的百分比,
  *   所以,数值为1就已经占满容器的高度,>1会有副作用,下面会介绍。
  * trailWidth的值number类型,表示未填充路径的高度占容器的百分比,
  *   如果不设置,默认等于strokeWidth的值,并且会被strokeWidth影响到:
  *   所以它最终的值:trailWidth=(trailWidth/strokeWidth)*height(height为容器高度)
  * 也就是说,strokeWidth和trailWidth的值同时设置,且不相等时,trailWidth的值可能不会如预期效果显示。
  * */
  let bar = new ProgressBar.Line(container, {
    strokeWidth: 1, // 跟踪路径的高度
    easing: 'easeInOut',  // 运动形式,默认是linear(匀速运动),easeInOut代表慢-快-慢,该配置项具体可以参照CSS3中transition的过渡形式
    duration: 5000,  // 走完整体时间(ms)
    color: 'salmon',  // 跟踪路径颜色(单词,16进制,rgb都可以)
    trailColor: 'blue',   // 未填充路径颜色(同上)
    trailWidth: 1,  // 未填充路径的高度
    svgStyle: {width: '100%', height: '100%'},   // 2个路径整体的宽高
    text: {   // 显示百分比文字的样式,最终生成放文字内容的容器是一个div
      // className可以指定文字容器的class名称,但是注意,所有在配置项style中写的样式都会转为内联样式,
      // 并且像color这种不设置,会继承其他配置项的样式,也会设置为内联样式。
      className: 'text-color',
      // 百分比文字的样式
      style: {
        color: 'green',   // 不设置的话,继承跟踪路径颜色
        position: 'absolute',
        textAlign: 'right',
        top: '0',
        padding: 0,
        margin: 0,
        // 如果要设置transform,直接设置,亲测好像不行,只能按照官网给出的写法。
        transform: {
          prefix: true,  // 自动加浏览器前缀
          value: 'translate(-100%, 70%)'
        }
      },
      // 一旦上面的style选项中写了样式,则自动会给容器添加position: relative;
      //(我觉得主要考虑的是文字的位置,一般在设置时,使用定位更方便一点,所以才会自动添加),
      // 可以通过设置下面这个属性为false,禁止自动给容器添加。
      autoStyleContainer: false,
    },
    // 下面三个配置项是配合使用的。
    // from指定进度条(根据上面所列配置项指定)开始的样式,to指定结束的样式。样式的变化自动会有过渡效果。
    // 这个demo中,只展示了颜色的变化,可以同时指定多个样式,比如还可以指定width的渐变等等。
    // step,第一个参数代表的就是管理from和to中样式的状态对象,根据state.color应该就很好理解了。
    //   第二个参数,就是实例对象(JavaScript代码最顶部生成的那个)
    from: {color: '#FFEA82'},
    to: {color: '#ED6A5A'},
    step: (state, bar) => {
      // 下面的bar.xxx都是在官网中介绍有案例使用的属性。
      // 设置跟踪路径颜色变化,颜色会根据from 和to 的渐变
      bar.path.setAttribute('stroke', state.color);
      // 设置百分比文字可以随着,跟随路径的不断填充而实时变化。
      // bar.setText(Math.round(bar.value() * 100) + ' %');
      // 我为了实现当进度条走到一定距离时,在显示文字,所以加了一个判断
      let value = Math.round(bar.value() * 100);
      if (value <= 5) {
        bar.setText('');
      } else {
        bar.setText(value+'%');
      }
      // 下面这个设置,主要是想实现文字的位置随着进度条的增长,跟着变化。
      bar.text.style.left = Math.round(bar.value() * 100) + '%';
     
    }
  });

  // animate方法,用来启动进度条动画。
  // 第一个参数 0.0 ~ 1.0 指定动画结束的百分比,一般都为1,进度条就会跑完整个矩形。
  // 第二个参数,配置项(这里没有写,感觉有点多余),如果配置的话,会重写上面的配置项,
  //   比如{duration: 4000} 会重写上面的duration。
  // 第三个参数,回调函数,在动画执行完成之后执行,也就是进度条走完。这里放一些处理逻辑。
  bar.animate(1, function () {
    console.log('动画结束,萌萌哒')
  });
</script>


以上就是长条形的实现。代码亲测可行。

2.2 圆形

dfcb06bd4c59cc8ba9a0e312855ca77dc5d2fed5
  • html代码,就一个div作为容器

<div id="container"></div>

  • css代码,设置margin是为了进度条的开始部分不在页面边缘,为了显示效果更好。设置position为相对定位,是因为显示进度条的百分比提示文字,默认会绝对定位

#container {
  margin: 20px;
  width: 100px;
  height: 100px;
  position: relative;
}

  • JavaScript代码,各个配置参数,会在注释中,详细说明。这是官方配置参数的文档

<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>
  let container = document.querySelector('#container')

  var bar = new ProgressBar.Circle(container, {
    color: 'salmon',
    strokeWidth: 50,  // 正好是从圆心开始画起,>50会越过圆心,<50画出的是圆环
    trailWidth: 50,  // 也设置为50,就是一个未填充的圆形,而不是圆环。要么设置为0
    easing: 'easeInOut',
    duration: 5000,
    text: {
      style: {
        color: 'yellow',
        display: 'inline-block',
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%,-50%)'
      },
      autoStyleContainer: false
    },
    // fill: 'salmon',   // 圆形内容区域填充色,当需要画圆环时,效果应该最好。
    from: { color: '#aaa'},
    to: { color: '#333'},
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      
      var value = Math.round(circle.value() * 100);
      circle.setText(value+'%');
    }
  });
  bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  bar.text.style.fontSize = '2rem';

  bar.animate(1.0, function () {
    console.log('动画执行结束')
  });

</script>

  • 这个是width的渐变效果
2866e476f0dbbf045f6d08ace8152085104a8721

strokeWidth: 5,
trailWidth: 0,
fill: 'salmon',   // 圆形内容区域填充色
from: { color: '#aaa', width: 1},
to: { color: '#333', width: 5},
circle.path.setAttribute('stroke-width', state.width);  


原文发布时间为:2018年06月28日
原文作者:非梧不栖
本文来源:掘金 如需转载请联系原作者


网友评论

登录后评论
0/500
评论
我是小助手
+ 关注
所属云栖号: 前端那些事儿