Material Design 是 Google 推出的一套设计语言，其优美的设计和流畅的动效成为了众多前端开发者钟爱的设计。其中，圆形进度条效果也是 Material Design 设计风格的一个常见元素，它能够非常直观地展现进度，并与其他设计元素相融合，给用户带来更好的体验。
本篇文章将详细介绍如何使用 Material Design 的圆形进度条效果，并提供制作教程和示例代码，帮助开发者快速上手这一设计元素。
效果示例
首先看一下使用 Material Design 圆形进度条的效果示例。
可以看到，在加载中或者某项任务正在进行时，圆形进度条会展现出一个圆形的进度指示器，同时其它设计元素将会被遮住。
制作教程
接下来我们将会分步骤地介绍如何制作这个圆形进度条效果。
步骤 1：准备 HTML 结构
首先，我们需要一个容器来包含圆形进度条，并添加一个 canvas 元素：
<div class="progress-circle"> <canvas id="progress"></canvas> </div>
步骤 2：添加 CSS 样式
接下来，为我们的容器添加样式：
-- -------------------- ---- ------- ---------------- - -------------- ---- --------- --------- ------ ------ ------- ------ ------- - ----- --------- ------- - --------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -
其中，我们为容器添加了 border-radius: 50%，让其呈现圆形，同时设置了容器的宽度、高度和边距，使其居中显示。
步骤 3：绘制圆形
接下来，我们需要使用 canvas 元素来绘制圆形。我们需要创建一个 JavaScript 函数，该函数将在画布上绘制圆形：
function drawCircle(ctx, radius, lineWidth, percent) {
// 绘制圆形
ctx.beginPath();
ctx.arc(radius, radius, radius - lineWidth, -Math.PI / 2, Math.PI * 2 / 100 * percent - Math.PI / 2);
ctx.lineWidth = lineWidth * 2;
ctx.stroke();
}该函数有四个参数：
ctx：canvas 上下文对象radius：圆形的半径lineWidth：圆形线条的宽度percent：进度百分比
可以看到，我们使用了 ctx.arc() 方法绘制圆形，并使用 ctx.lineWidth 指定线的宽度。圆形的位置和大小由 radius 参数指定，进度百分比由 percent 参数指定。
步骤 4：动态绘制进度
接下来，我们需要使用 JavaScript 和 CSS3 动画来动态绘制圆形进度条。
首先，当页面加载时，我们需要设置 canvas 的属性，获得上下文对象：
-- -------------------- ---- ------- ----- ------ - ------------------------------------ ----- --- - ------------------------ -- -- ------ -- ------------ - ---- ------------- - ---- ---------------------------- - ---------- -- ------ - --- ------- - --
接下来，我们可以使用 JavaScript 定时器来动态绘制圆形，并通过 requestAnimationFrame() 方法不断刷新画布，绘制动态圆形进度条。
-- -------------------- ---- -------
-------- ------ -
-- ------
--------------- --- -- -----
-- -------- - ---- -
-- ------- ----------
----------------------------
--------------- --- -- -----------
-
-
-------其中，我们首先使用 drawCircle() 函数绘制一个 100% 的背景圆形，然后再使用定时器调用 requestAnimationFrame() 方法不断刷新画布，绘制动态圆形进度条。随着 percent 变量的递增，进度也将逐渐增加。
步骤 5：增加动画效果
对于进度条的动画效果，我们可以使用 CSS3 的 transition 属性来实现顺滑的动画效果。我们需要为 canvas 元素添加以下样式:
-- -------------------- ---- ------- --------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- ---------- --------------- ----------- ---------------- ---- ------------ ----------------- ------ ------- -
其中，我们使用了 transform 属性将 canvas 元素旋转了 90 度，以便绘制圆形。同时，我们也为该元素添加了 transition 属性，使得 canvas 绘制进度时出现动画效果。
同时，我们还需要更新 drawCircle() 函数来使用 stroke-dasharray 属性绘制圆形路径，从而出现动画效果：
-- -------------------- ---- ------- -------- --------------- ------- ---------- -------- - -- ------ ----- --------- - ------- - - - ------- ----- ---- - --- --------- ---------------- ------- ------ - ---------- -------- - -- ------- - - - --- - ------- - ------- - --- ----- ------------ - --------- - ------- - ---- --------------- - -------- ----------- - -------- ------------ - -------- ----------------- ------------- --------- --- ----------------- -
在 drawCircle() 函数中，我们使用 stroke-dasharray 属性设置 stroke 路径和空隙的长度，从而出现动画效果。
最终的效果可以在 CodePen 上查看。
总结
本文介绍了如何使用 Material Design 的圆形进度条效果，并提供了详细的制作教程和示例代码。通过该文章的学习，开发者不仅可以掌握如何使用圆形进度条，还可以了解到如何使用 canvas 绘制基本形状，并使用定时器和 CSS3 创建动画效果，这对于前端开发来说是非常值得学习的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cc3e4968c7c53b0f3a59e