使用ProgressBar.js创建时尚且响应Swift的进度条

网络上没有任何事情会立即发生。 唯一的区别是完成一个过程所需的时间。 有些过程可能在几毫秒内发生，而其他过程可能需要几秒钟或几分钟。 例如，您可能正在编辑用户上传的非常大的图像，此过程可能需要一些时间。 在这种情况下，最好让访问者知道该网站并未停留在某处，但实际上它正在处理您的图像并取得了一些进展。

向读者显示一个过程已进行了多少的最常见方法之一是使用进度条。 在本教程中，您将学习如何使用ProgressBar.js库创建具有简单和复杂形状的不同进度条。

创建一个基本进度条

将库包含在项目中后，使用该库创建进度栏很容易。 所有主要浏览器（包括IE9 +）都支持ProgressBar.js，这意味着您可以放心地在创建的任何网站中使用它。 您可以从GitHub获取该库的最新版本，或直接使用CDN链接将其添加到您的项目中。

为避免任何意外行为，请确保进度条的容器与进度条具有相同的宽高比。 在圆形的情况下，容器的长宽比应为1：1，因为宽度将等于高度。 在半圆形的情况下，容器的长宽比应为2：1，因为宽度将是高度的两倍。 同样，对于简单的线条，容器的线条长宽比应为100：strokeWidth 。

当创建带有直线，圆形或半圆形的进度条时，可以简单地使用ProgressBar.Shape()方法创建进度条。 在这种情况下， Shape可以是Circle ， Line或SemiCircle 。 您可以将两个参数传递给Shape()方法。 第一个参数是用于选择进度条容器的选择器或DOM节点。 第二个参数是具有键值对的对象，这些键值对确定进度条的外观。

您可以使用color属性指定进度条的color 。 默认情况下，您创建的任何进度条将具有深灰色。 可以使用strokeWidth属性指定进度条的厚度。 您应该记住，此处的宽度不是以像素为单位，而是以画布大小的百分比表示。 例如，如果画布为200px宽， strokeWidth值为5将创建一条10px粗的线。

除了主要的进度条之外，该库还允许您绘制一条尾线，向读者显示进度条将在其上移动的路径。 踪迹线的颜色可以使用指定trailColor属性，并且可以使用指定其宽度trailWidth属性。 就像strokeWidth一样， trailWidth属性也以百分比形式计算宽度。

可以使用duration属性指定进度条从其初始状态到最终状态所花费的总时间。 默认情况下，进度条将在800毫秒内完成其动画。

您可以使用easing属性指定动画过程中进度条的移动方式。 默认情况下，所有进度条将以linear速度移动。 为了使动画更具吸引力，您可以将此值设置为easeIn ， easeOut ， easeInOut或bounce 。

指定初始参数值后，可以使用animate()方法对进度条进行animate()处理。 此参数接受三个参数。 第一个参数是您要为进度线设置动画的数量。 另外两个参数是可选的。 第二个参数可用于覆盖您在初始化期间设置的任何动画属性值。 第三个参数是在动画结束后执行其他操作的回调函数。

在下面的示例中，我使用到目前为止讨论的所有属性创建了三个不同的进度条。

var lineBar = new ProgressBar.Line('#line-container', {
    color: 'orange',
    strokeWidth: 2,
    trailWidth: 0.5
});

lineBar.animate(1, {
    duration: 1000
});

var circleBar = new ProgressBar.Circle('#circle-container', {
    color: 'white',
    strokeWidth: 2,
    trailWidth: 10,
    trailColor: 'black',
    easing: 'easeInOut'
});

circleBar.animate(0.75, {
    duration: 1500
});

var semiBar = new ProgressBar.SemiCircle('#semi-container', {
    color: 'violet',
    strokeWidth: 2,
    trailWidth: 0.5,
    easing: 'bounce'
});

semiBar.animate(1, {
    duration: 3000
});

使用进度条为文本值设置动画

上面示例中进度条动画的唯一变化是它们的长度。 但是，ProgressBar.js还允许您更改其他物理属性，例如描边线的宽度和颜色。 在这种情况下，初始化进度条时， to在from参数中指定进度条的初始值，在to参数中指定最终值。

您还可以告诉库使用进度条创建一个随附的文本元素，以向用户显示一些文本信息。 文本可以是任何值，从静态值到指示动画进度的数字值。 text参数将接受一个对象作为其值。

该对象可以具有value参数，以指定要在元素内部显示的初始文本。 您还可以使用className参数提供要添加到文本元素的类名称。 如果要对文本元素应用某些内联样式，则可以将它们全部指定为style参数的值。 通过将style的值设置为null可以删除所有默认样式。 重要的是要记住，默认值仅在未为style内部的任何CSS属性设置自定义值的情况下才适用。

如果您不自行更新，则在整个动画过程中，文本元素内的值将保持不变。 幸运的是，ProgressBar.js还提供了一个step参数，该参数可用于定义每个动画步骤都要调用的函数。 由于此函数每秒会被多次调用，因此您需要谨慎使用它，并使其中的计算保持简单。

var lineBar = new ProgressBar.Line("#line-container", {
  strokeWidth: 4,
  trailWidth: 0.5,
  from: { color: "#FF9900" },
  to: { color: "#00FF99" },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '-30px',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

lineBar.animate(1, {
  duration: 4000
});

var circleBar = new ProgressBar.Circle("#circle-container", {
  color: "white",
  strokeWidth: 2,
  trailWidth: 25,
  trailColor: "black",
  easing: "easeInOut",
  from: { color: "#FF9900", width: 1 },
  to: { color: "#FF0099", width: 25 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '42%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

circleBar.animate(0.75, {
  duration: 1500
});

var semiBar = new ProgressBar.SemiCircle("#semi-container", {
  color: "violet",
  strokeWidth: 2,
  trailWidth: 8,
  trailColor: "black",
  easing: "bounce",
  from: { color: "#FF0099", width: 1 },
  to: { color: "#FF9900", width: 2 },
  text: {
    value: '0',
    className: 'progress-text',
    style: {
      color: 'black',
      position: 'absolute',
      top: '45%',
      left: '50%',
      padding: 0,
      margin: 0,
      transform: null
    }
  },
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
    shape.setText(Math.round(shape.value() * 100) + ' %');
  }
});

semiBar.animate(0.75, {
  duration: 2000
});

创建具有自定义形状的进度条

有时，您可能想创建具有不同形状的进度条，以与网站的整体主题相匹配。 ProgressBar.js允许您使用Path()方法创建具有自定义形状的进度条。 此方法的工作方式类似于Shape()但提供较少的参数以自定义进度条动画。 您仍然可以为动画提供duration easing值。 如果要对用于绘制自定义路径的笔触的颜色和宽度进行动画处理，可以在from和to参数中进行设置。

该库没有像为简单的直线和圆一样提供任何方式为自定义路径绘制轨迹。 但是，您可以自己轻松地创建路径。 在下面的示例中，我使用Path()方法创建了一个三角形进度条。

在编写JavaScript代码之前，我们将必须在HTML中定义我们的自定义SVG路径。 这是我用来创建简单三角形的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
  <path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/>
  <path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/>
</svg>

您可能已经注意到，我创建了两个不同的路径元素。 第一条路径为浅灰色，其作用类似于我们在上一节中使用简单进度条看到的路径。 第二条路径是我们用代码制作动画的路径。 我们为它提供了一个id ，该id用于在下面JavaScript代码中进行标识。

var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});

path.animate(1);

最后的想法

如您在本教程中所看到的，ProgressBar.js允许您轻松轻松地创建各种进度条。 它还为您提供了为进度条的不同属性（例如其宽度和颜色）设置动画的选项。

不仅如此，您还可以使用此库来更改随附文本元素的值，以便以文本形式显示进度。 本教程涵盖了创建简单进度条所需的所有知识。 但是，您可以浏览文档以了解有关该库的更多信息。

如果您希望我在本教程中进行说明，请随时在评论中让我知道。

翻译自: https://code.tutsplus.com/tutorials/creating-stylish-and-responsive-progress-bars-using-progressbarjs--cms-30652