CSS控制SVG路径动画：`stroke-dasharray`与`stroke-dashoffset`的插值计算

大家好！今天我们将深入探讨如何使用 CSS 的 stroke-dasharray 和 stroke-dashoffset 属性来控制 SVG 路径动画，并重点讲解动画过程中涉及的插值计算。这种技术广泛应用于创建吸引人的用户界面，例如加载指示器、进度条、以及各种视觉效果。

1. `stroke-dasharray` 和 `stroke-dashoffset` 的基础

首先，我们需要理解 stroke-dasharray 和 stroke-dashoffset 这两个属性的作用。

stroke-dasharray: 定义描边（stroke）的虚线模式。它接受一个用逗号或空格分隔的数值列表，这些数值交替指定短划线和间隙的长度。例如，stroke-dasharray: 10 5; 表示绘制 10 个单位长度的短划线，然后留出 5 个单位长度的间隙，并重复这个模式。如果只提供一个数值，则短划线和间隙的长度相等。
stroke-dashoffset: 指定虚线模式相对于路径起点的偏移量。正值会将虚线向路径的起始位置移动，负值则向路径的结束位置移动。通过改变 stroke-dashoffset 的值，我们可以实现路径的“绘制”或“擦除”动画效果。

下面是一个简单的例子：

<svg width="200" height="100">
  <path d="M10 50 L190 50" stroke="black" stroke-width="5" stroke-dasharray="20 10" />
</svg>

这段代码会绘制一条水平线，其描边为虚线，短划线长度为 20，间隙长度为 10。

2. 创建基本的路径绘制动画

现在，让我们创建一个基本的路径绘制动画。我们将使用 stroke-dasharray 和 stroke-dashoffset 来控制路径的可见部分。

<svg width="200" height="100">
  <path id="myPath" d="M10 50 L190 50" stroke="blue" stroke-width="5" stroke-dasharray="180 180" stroke-dashoffset="180">
    <animate attributeName="stroke-dashoffset" from="180" to="0" dur="2s" repeatCount="indefinite" />
  </path>
</svg>

在这个例子中，我们首先将 stroke-dasharray 设置为路径的长度（180）加上一个相同的长度（180）。这意味着路径最初完全被间隙隐藏，因为 stroke-dashoffset 也设置为路径的长度（180）。然后，我们使用 <animate> 元素来逐渐改变 stroke-dashoffset 的值，从 180 变为 0。这会使得虚线模式逐渐向前移动，从而产生路径被绘制出来的效果。

关键点：

stroke-dasharray 的第一个值通常设置为路径的总长度。
stroke-dashoffset 的初始值设置为路径的总长度，以隐藏整个路径。
通过动画改变 stroke-dashoffset，使其从路径长度变为 0，即可实现绘制动画。

3. 使用 CSS 实现动画

虽然可以使用 SVG 的 <animate> 元素，但通常更方便使用 CSS 来控制动画。这使得样式和动画逻辑更加分离。

<svg width="200" height="100">
  <path id="myPath" d="M10 50 L190 50" stroke="green" stroke-width="5" stroke-dasharray="180" stroke-dashoffset="180"></path>
</svg>

<style>
  #myPath {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: dash 2s linear infinite;
  }

  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

在这个例子中，我们使用 CSS animation 来改变 stroke-dashoffset 的值。 @keyframes dash 定义了动画的关键帧，从初始的 stroke-dashoffset: 180 到 stroke-dashoffset: 0。

4. 计算路径长度

为了使动画正确工作，我们需要知道路径的长度。对于简单的路径，例如直线，我们可以手动计算。但是，对于更复杂的路径，最好使用 JavaScript 来获取路径长度。

<svg width="200" height="200">
  <path id="myPath" d="M10 10 Q 90 90 190 10" stroke="red" stroke-width="5" fill="none"></path>
</svg>

<script>
  const path = document.getElementById('myPath');
  const pathLength = path.getTotalLength();

  path.style.strokeDasharray = pathLength;
  path.style.strokeDashoffset = pathLength;

  path.style.animation = 'dash 2s linear infinite';

  const style = document.createElement('style');
  style.textContent = `
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
  `;
  document.head.appendChild(style);
</script>

在这个例子中，我们使用 path.getTotalLength() 方法来获取路径的长度。然后，我们将 stroke-dasharray 和 stroke-dashoffset 设置为该长度，并应用 CSS 动画。

5. `stroke-dasharray` 的高级用法

stroke-dasharray 不仅可以接受单个数值，还可以接受多个数值，以创建更复杂的虚线模式。例如：

<svg width="200" height="100">
  <path d="M10 50 L190 50" stroke="purple" stroke-width="5" stroke-dasharray="10 5 20 5" />
</svg>

在这个例子中，虚线模式由 10 个单位的短划线、5 个单位的间隙、20 个单位的短划线和 5 个单位的间隙组成，并重复这个模式。

通过结合不同的 stroke-dasharray 值和动画，我们可以创建各种有趣的视觉效果。例如，我们可以创建一个“闪烁”的路径动画：

<svg width="200" height="100">
  <path id="myPath" d="M10 50 L190 50" stroke="orange" stroke-width="5" fill="none"></path>
</svg>

<style>
  #myPath {
    stroke-dasharray: 10 10; /* 短划线和间隙长度相等 */
    animation: blink 1s steps(2, end) infinite; /* steps(2, end) 实现阶梯式动画 */
  }

  @keyframes blink {
    to {
      stroke-dashoffset: 20; /*  短划线+间隙的长度 */
    }
  }
</style>

在这个例子中，我们使用 steps(2, end) 缓动函数来创建阶梯式动画。 stroke-dashoffset 在两个状态之间瞬间切换，从而产生闪烁的效果。

6. 插值计算的深入探讨

动画的本质就是值的插值计算。当我们在 CSS 中定义一个动画时，浏览器会计算动画过程中每个时间点的属性值。对于 stroke-dasharray 和 stroke-dashoffset 而言，插值计算的方式直接影响动画的视觉效果。

线性插值：

默认情况下，CSS 使用线性插值。这意味着属性值会随着时间线性变化。例如，如果 stroke-dashoffset 从 100 变为 0，持续时间为 1 秒，那么在 0.5 秒时，stroke-dashoffset 的值为 50。

非线性插值：

除了线性插值，我们还可以使用各种缓动函数（easing functions）来实现非线性插值。缓动函数可以控制动画的速度变化，例如，在开始时缓慢加速，然后在结束时缓慢减速。

CSS 提供了多种预定义的缓动函数，例如 ease, ease-in, ease-out, ease-in-out。我们还可以使用 cubic-bezier() 函数来定义自定义的缓动函数。

例如，我们可以使用 ease-in-out 缓动函数来创建一个更平滑的路径绘制动画：

<svg width="200" height="100">
  <path id="myPath" d="M10 50 L190 50" stroke="brown" stroke-width="5" fill="none"></path>
</svg>

<style>
  #myPath {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: dash 2s ease-in-out infinite; /* 使用 ease-in-out 缓动函数 */
  }

  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

在这个例子中，ease-in-out 缓动函数会使动画在开始和结束时速度较慢，在中间速度较快，从而产生更自然的视觉效果。

stroke-dasharray 的插值计算：

stroke-dasharray 的插值计算比较复杂，因为它涉及多个数值。如果 stroke-dasharray 的初始值和最终值的数值数量不同，浏览器会尝试进行匹配。如果无法匹配，动画可能不会按预期工作。

例如，如果我们将 stroke-dasharray 从 "10 5" 动画到 "20"，浏览器会将 "20" 扩展为 "20 20"，然后进行插值计算。

为了确保动画的平滑过渡，最好保持 stroke-dasharray 的数值数量不变。

7. 实际应用案例

加载指示器： 我们可以使用路径动画来创建各种加载指示器。例如，我们可以创建一个圆形路径，并使用 stroke-dasharray 和 stroke-dashoffset 来控制圆的绘制进度。
进度条： 路径动画也可以用于创建进度条。我们可以根据任务的完成百分比来更新 stroke-dashoffset 的值，从而显示进度。
动态图表： 路径动画可以用于动态地绘制图表，例如折线图和柱状图。
交互式动画： 我们可以使用 JavaScript 来控制 stroke-dashoffset 的值，从而创建交互式的路径动画。例如，我们可以根据用户的鼠标位置来改变路径的绘制进度。

8. 性能优化

在使用路径动画时，需要注意性能问题。频繁地改变 stroke-dasharray 和 stroke-dashoffset 的值可能会导致性能下降，尤其是在复杂的路径上。

以下是一些性能优化的建议：

简化路径： 尽量使用简单的路径，避免使用过多的节点。
使用硬件加速： 确保动画使用硬件加速。可以通过添加 transform: translateZ(0); 或 backface-visibility: hidden; 等 CSS 属性来触发硬件加速。
减少重绘： 尽量减少动画引起的重绘次数。可以使用 requestAnimationFrame() 来优化动画的执行。
避免在滚动事件中直接操作 DOM： 在滚动事件中直接操作 DOM 可能会导致性能问题。可以使用节流（throttle）或防抖（debounce）技术来减少 DOM 操作的频率。

9. 兼容性考虑

stroke-dasharray 和 stroke-dashoffset 属性在现代浏览器中都得到了很好的支持。但是，在旧版本的浏览器中可能存在兼容性问题。

为了确保兼容性，可以使用以下方法：

使用 polyfill： 可以使用 polyfill 来为旧版本的浏览器提供 stroke-dasharray 和 stroke-dashoffset 的支持。
提供备用方案： 对于不支持路径动画的浏览器，可以提供备用方案，例如使用静态图像或简单的 JavaScript 动画。

10. 一个更复杂的例子：绘制一个动态的圆圈

下面的例子展示了如何使用 stroke-dasharray 和 stroke-dashoffset 绘制一个动态的圆圈，并使其旋转：

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="80" stroke="dodgerblue" stroke-width="10" fill="none"></circle>
</svg>

<style>
  #myCircle {
    stroke-dasharray: 502.65; /* 圆的周长 */
    stroke-dashoffset: 502.65;
    animation: dash 4s linear infinite, rotate 8s linear infinite; /* 同时进行描边和旋转动画 */
  }

  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
</style>

在这个例子中，我们首先计算圆的周长（2 * Math.PI * r），并将其设置为 stroke-dasharray 的值。然后，我们使用 stroke-dashoffset 来控制圆的绘制进度。我们还添加了一个旋转动画，使圆在绘制的同时旋转。

11. 使用JavaScript控制动画

虽然CSS动画很方便，但有时我们需要使用JavaScript来更精细地控制动画。例如，我们可以根据用户的交互来改变stroke-dashoffset的值。

<svg width="200" height="200">
  <circle id="myCircle" cx="100" cy="100" r="80" stroke="crimson" stroke-width="10" fill="none"></circle>
</svg>

<input type="range" id="progress" min="0" max="100" value="0">

<script>
  const circle = document.getElementById('myCircle');
  const progress = document.getElementById('progress');
  const circumference = 2 * Math.PI * 80;

  circle.style.strokeDasharray = circumference;
  circle.style.strokeDashoffset = circumference;

  progress.addEventListener('input', () => {
    const value = progress.value;
    const offset = circumference - (value / 100) * circumference;
    circle.style.strokeDashoffset = offset;
  });
</script>

在这个例子中，我们使用一个range input来控制圆的绘制进度。当用户改变range input的值时，我们计算出对应的stroke-dashoffset值，并更新circle的样式。

12. 总结：CSS控制SVG路径动画的核心

我们学习了如何利用 CSS 的 stroke-dasharray 和 stroke-dashoffset 属性来创建各种 SVG 路径动画。我们了解了插值计算在动画中的作用，以及如何使用缓动函数来控制动画的速度变化。我们还探讨了性能优化和兼容性考虑。希望这些知识能够帮助你创建更吸引人的用户界面。

更多IT精英技术系列讲座，到智猿学院