CSS环形进度条动画教程详解

你在学习文章相关的知识吗？本文《CSS动画绘制环形进度条教程》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

SVG进度环形图的核心是利用circle元素的stroke-dasharray和stroke-dashoffset属性协同控制线条显示长度，通过CSS动画改变stroke-dashoffset从周长值过渡到计算后的剩余偏移量，实现进度填充效果；2. 为适配不同半径的环形图，推荐使用CSS自定义属性定义半径并结合calc()动态计算周长，也可用JavaScript读取r属性实时设置变量或样式；3. 除线性进度外，CSS动画还能实现缓动函数变化、颜色渐变、宽度波动、阴影光晕、旋转起始点、数字跳动、图标切换及背景轨迹动画等创意效果，提升视觉表现力。

使用CSS动画绘制SVG进度环形图，核心在于巧妙利用SVG的circle元素以及CSS的stroke-dasharray和stroke-dashoffset属性，配合@keyframes动画来控制线条的显示与隐藏，从而模拟出进度填充的效果。这比想象中要灵活和强大，能做出非常流畅且富有表现力的动画。

解决方案

要实现一个动态的SVG进度环形图，我们通常会用到两个SVG circle元素：一个作为背景轨迹，另一个则用于显示进度。关键在于通过CSS来控制进度圆的stroke-dasharray和stroke-dashoffset属性。

首先，在HTML中定义SVG结构：

<div class="progress-circle-container">
  <svg class="progress-circle" viewBox="0 0 100 100">
    <circle class="progress-circle-track" cx="50" cy="50" r="45"></circle>
    <circle class="progress-circle-bar" cx="50" cy="50" r="45"></circle>
  </svg>
  <span class="progress-text">0%</span>
</div>

接着，是CSS部分。这里面藏着实现动画的秘密：

.progress-circle-container {
  width: 150px;
  height: 150px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-circle {
  transform: rotate(-90deg); /* 让进度从顶部开始 */
  width: 100%;
  height: 100%;
}

.progress-circle-track {
  fill: none;
  stroke: #e6e6e6;
  stroke-width: 10;
}

.progress-circle-bar {
  fill: none;
  stroke: #4CAF50; /* 进度条颜色 */
  stroke-width: 10;
  stroke-linecap: round; /* 圆头效果，让进度条末端更平滑 */
  /* 这里的计算是关键：2 * PI * r = 2 * 3.14159 * 45 ≈ 282.74 */
  /* 我们用一个变量来存储周长，方便后续计算 */
  --circumference: calc(2 * 3.14159 * 45); /* 假设半径是45 */
  stroke-dasharray: var(--circumference); /* 完整的圆周长 */
  stroke-dashoffset: var(--circumference); /* 初始时完全隐藏进度条 */
  transition: stroke-dashoffset 1s ease-out; /* 平滑过渡动画 */
  /* 或者通过 @keyframes 动画来控制 */
  /* animation: fill-progress 2s forwards ease-in-out; */
}

/* 如果要通过 JS 动态设置进度，可以直接修改 --progress 变量 */
/* 例如：.progress-circle-bar { stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress, 0))); } */

/* 如果使用 @keyframes 动画 */
@keyframes fill-progress {
  from {
    stroke-dashoffset: var(--circumference);
  }
  to {
    /* 假设进度是 75% */
    stroke-dashoffset: calc(var(--circumference) * (1 - 0.75));
  }
}

.progress-text {
  position: absolute;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

这段CSS里，--circumference是一个CSS变量，存储了圆的周长。stroke-dasharray设置成周长，意味着我们有一条和圆周长一样长的虚线段，后面跟着一个0长度的空白。stroke-dashoffset则控制这条虚线段的起始偏移量。当stroke-dashoffset等于周长时，整条虚线被“推”出视图，所以什么也看不到。当它逐渐减小到0时，虚线就完全显示出来，形成一个完整的圆。通过计算calc(var(--circumference) * (1 - 进度百分比))，我们就能精确控制进度条的显示长度。

SVG中的stroke-dasharray和stroke-dashoffset如何协同工作实现进度动画？

在我看来，stroke-dasharray和stroke-dashoffset是SVG线条绘制里最富有魔力的两个属性，它们协同作用，能把一条连续的线段玩出各种花样，尤其是实现这种动态进度条。

简单来说，stroke-dasharray定义了虚线（dash）和间隔（gap）的序列。你可以给它一个或多个数值。如果只给一个值，比如stroke-dasharray: 10，那就意味着10个单位的虚线，然后是10个单位的空白，如此循环。但对于进度条，我们通常只给一个值：圆的周长。比如，一个半径为45的圆，周长大约是282.74。那么stroke-dasharray: 282.74就表示有一条282.74单位长的实线，后面紧跟着一个0单位的空白。这样，理论上这条线就是连续的，因为它没有实际的“间隔”。

而stroke-dashoffset则更像是一个“卷尺”，它控制着这条虚线模式的起始点。想象一下，你有一条无限长的、由虚线和空白组成的图案带子。stroke-dashoffset就是让你把这条带子从某个位置开始“贴”到你的SVG路径上。当stroke-dashoffset的值等于stroke-dasharray定义的虚线长度时，这意味着你把这条“实线段”完全推到了路径的起点之外，所以你看不到它。

比如，周长是282.74，你设置stroke-dasharray: 282.74和stroke-dashoffset: 282.74。此时，这条实线段的起点被偏移了282.74单位，刚好完全隐藏了。当你把stroke-dashoffset从282.74动画到0时，这条实线段就从路径的起点开始，逐渐“展开”直到完全显示出来。如果目标是50%的进度，那stroke-dashoffset就应该动画到282.74 * (1 - 0.5)，也就是141.37，这样就只显示了一半的圆。

这种机制的巧妙之处在于，我们并不是真的在“画”线，而是在“揭示”一条已经存在的线。通过控制偏移量，我们能精确地控制这条线的哪一部分是可见的，从而创造出进度条从无到有的视觉效果。

如何确保不同半径的环形图都能正确显示进度动画？

这确实是个实际开发中会遇到的问题。如果你有多个不同大小的进度环，每次都手动去计算周长并写死在CSS里，那简直是噩梦。我的经验是，有几种方法可以优雅地处理这个问题，让不同半径的环形图都能正确且灵活地显示进度动画。

1. CSS自定义属性（CSS Variables）与calc()的结合： 这是我个人最推荐的方式，因为它保持了CSS的纯粹性，并且非常灵活。我们可以在CSS中定义一个变量来存储圆的半径，然后通过calc()函数来计算周长，并将其应用于stroke-dasharray和stroke-dashoffset。

   .progress-circle-bar {
     --radius: 45; /* 定义半径变量 */
     --circumference: calc(2 * 3.14159 * var(--radius)); /* 计算周长 */
     stroke-dasharray: var(--circumference);
     stroke-dashoffset: var(--circumference);
     /* ... 其他样式 ... */
   }
   
   /* 针对特定大小的环形图，只需覆盖 --radius 变量 */
   .progress-circle-large .progress-circle-bar {
     --radius: 60;
   }
   
   @keyframes fill-progress {
     from { stroke-dashoffset: var(--circumference); }
     to { stroke-dashoffset: calc(var(--circumference) * (1 - 0.75)); }
   }

   这样，你只需要在不同的容器或元素上修改--radius变量，所有相关的计算都会自动更新。这极大地提高了代码的可维护性和复用性。

2. JavaScript动态计算和设置： 如果你的环形图半径是完全动态的，比如用户可以拖动滑块改变大小，或者数据驱动导致半径不确定，那么JavaScript就成了不可或缺的工具。你可以通过JS获取SVG circle元素的半径（r属性），计算出周长，然后将stroke-dasharray和stroke-dashoffset的值直接设置到元素的style属性上，或者更新CSS自定义属性。

   const progressBar = document.querySelector('.progress-circle-bar');
   const radius = parseFloat(progressBar.getAttribute('r')); // 获取半径
   const circumference = 2 * Math.PI * radius;
   
   progressBar.style.setProperty('--circumference', circumference);
   // 假设要设置 75% 进度
   const progress = 0.75;
   progressBar.style.strokeDashoffset = circumference * (1 - progress);

   这种方式虽然引入了JS，但它提供了最大的灵活性，能够应对各种复杂的动态场景。

3. SVG viewBox与相对单位的结合（有限制）： 虽然SVG的viewBox属性可以帮助SVG在不同容器大小下进行缩放，但stroke-dasharray和stroke-dashoffset的值仍然是基于用户单位的。也就是说，如果你把viewBox设为0 0 100 100，并且圆的半径是45，那么周长就是2 * PI * 45。即使你把SVG容器放大两倍，这个圆在视觉上变大了，但它的“内部”计算单位仍然是基于100x100的viewBox。所以，这种方法并不能直接解决stroke-dasharray和stroke-dashoffset的动态计算问题，但它能确保SVG整体的缩放比例正确。通常，它会和CSS变量或JS计算结合使用。

在我看来，CSS自定义属性是目前最优雅且纯CSS的解决方案，它在不引入JS的情况下，提供了相当高的灵活性。当需要更复杂的动态交互时，再考虑引入JavaScript进行辅助计算。

除了简单的线性进度，CSS动画还能为环形图带来哪些创意效果？

CSS动画在环形进度图上能做的远不止从0到100%的线性填充。通过一些巧妙的组合和对动画属性的深入理解，我们可以为用户带来更生动、更富有表现力的视觉体验。

1. 非线性缓动效果（Easing Functions）： 最直接的升级就是改变animation-timing-function。默认的ease可能有点平淡，但你可以尝试ease-in-out让进度条先慢后快再慢，或者使用cubic-bezier()自定义一个更具弹性的效果。比如，一个cubic-bezier(.17,.67,.83,.67)可能会让进度条在最后“弹跳”一下，模拟出一种完成的喜悦感。这就像在说：“我完成了，而且完成得很漂亮！”

2. 多层动画与叠加效果： 我们可以不止动画一个circle。比如：

   • 颜色渐变： 随着进度条的填充，同时动画stroke的颜色，从红色（低进度）渐变到绿色（高进度）。
   • 宽度变化： 让进度条的stroke-width在动画过程中逐渐变宽或变窄，制造出一种“成长”或“收敛”的视觉效果。
   • 阴影/光晕： 在进度条完成时，给它添加一个box-shadow或filter: drop-shadow()的动画，让它像被点亮了一样，或者发出微弱的光晕，强调完成状态。

3. 起始点与结束点的动态变化： 除了stroke-dashoffset，我们也可以动画transform: rotate()来改变进度条的起始点。比如，让进度条在填充的同时，整个环形图缓慢旋转，增加视觉趣味性。或者，在进度完成时，让进度条的末端有一个小小的“收尾”动画，比如短暂地变细或闪烁一下。

4. 文本或图标的联动动画： 进度条内部通常会显示百分比数字。我们可以让这个数字也动起来：

   • 数字跳动： 随着进度条的填充，数字从0快速跳变到目标值，而不是简单的静态显示。
   • 字体大小/颜色变化： 进度完成时，数字可以放大、加粗或变色，突出最终结果。
   • 图标切换： 当进度达到100%时，将百分比数字替换成一个“完成”的打钩图标，并伴随一个缩放或淡入动画。

5. 背景轨迹的动画： 不只是进度条，背景轨迹也可以动。比如，让背景轨迹在加载初期有一个短暂的淡入或绘制动画，然后再开始填充进度条，这样整个加载过程会显得更有层次感。

这些创意效果的实现，往往不需要复杂的JavaScript，很多时候纯CSS的@keyframes和transition就能搞定。关键在于跳出“单纯显示进度”的思维定式，把环形图看作一个可以进行多维度视觉表达的画布。

今天关于《CSS环形进度条动画教程详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS动画,SVG,环形进度条,stroke-dashoffset,stroke-dasharray的内容请关注golang学习网公众号！