从认识stroke开始，一同感受SVG路径描边动画的妙处

前端

2023-11-06 08:55:36

概述

SVG中有一个比较重要的属性分支：stroke（描边）。本节讲解的动画就是围绕stroke展开的。

常用属性

在SVG中，stroke包含许多属性，我们这里主要介绍几个常用的属性：

stroke-width：描边的宽度。
stroke-linecap：描边的端点样式，可以是butt、round、square。
stroke-linejoin：描边的连接点样式，可以是miter、round、bevel。
stroke-dasharray：描边的虚线样式，可以是none或一组数字。
stroke-dashoffset：描边的虚线偏移量。

stroke-width动画

stroke-width动画可以用来改变描边的宽度，从而产生一些有趣的动画效果。例如，我们可以让描边的宽度随着时间的推移逐渐增加或减少，或者让描边的宽度随着鼠标的移动而变化。

<svg width="200" height="200">
  <path d="M 0 100 L 200 100" stroke="red" stroke-width="10" />
</svg>

<script>
  const path = document.querySelector('path');

  // 创建一个动画，让描边的宽度随着时间的推移逐渐增加
  const animation = path.animate([
    { strokeWidth: 10 },
    { strokeWidth: 20 }
  ], {
    duration: 1000,
    iterations: Infinity
  });

  // 让动画在鼠标移动时暂停
  path.addEventListener('mousemove', () => {
    animation.pause();
  });

  // 让动画在鼠标离开时继续播放
  path.addEventListener('mouseout', () => {
    animation.play();
  });
</script>

上面的代码创建一个SVG路径，并设置其描边的宽度为10。然后，它创建一个动画，让描边的宽度随着时间的推移逐渐增加到20。最后，它添加两个事件侦听器，让动画在鼠标移动时暂停，在鼠标离开时继续播放。

stroke-linecap动画

stroke-linecap动画可以用来改变描边的端点样式，从而产生一些有趣的动画效果。例如，我们可以让描边的端点样式随着时间的推移逐渐变化，或者让描边的端点样式随着鼠标的移动而变化。

<svg width="200" height="200">
  <path d="M 0 100 L 200 100" stroke="red" stroke-width="10" stroke-linecap="butt" />
</svg>

<script>
  const path = document.querySelector('path');

  // 创建一个动画，让描边的端点样式随着时间的推移逐渐变化
  const animation = path.animate([
    { strokeLinecap: 'butt' },
    { strokeLinecap: 'round' },
    { strokeLinecap: 'square' }
  ], {
    duration: 1000,
    iterations: Infinity
  });

  // 让动画在鼠标移动时暂停
  path.addEventListener('mousemove', () => {
    animation.pause();
  });

  // 让动画在鼠标离开时继续播放
  path.addEventListener('mouseout', () => {
    animation.play();
  });
</script>

上面的代码创建一个SVG路径，并设置其描边的端点样式为butt。然后，它创建一个动画，让描边的端点样式随着时间的推移逐渐变化为round和square。最后，它添加两个事件侦听器，让动画在鼠标移动时暂停，在鼠标离开时继续播放。

stroke-linejoin动画

stroke-linejoin动画可以用来改变描边的连接点样式，从而产生一些有趣的动画效果。例如，我们可以让描边的连接点样式随着时间的推移逐渐变化，或者让描边的连接点样式随着鼠标的移动而变化。

<svg width="200" height="200">
  <path d="M 0 100 L 100 0 L 200 100" stroke="red" stroke-width="10" stroke-linejoin="miter" />
</svg>

<script>
  const path = document.querySelector('path');

  // 创建一个动画，让描边的连接点样式随着时间的推移逐渐变化
  const animation = path.animate([
    { strokeLinejoin: 'miter' },
    { strokeLinejoin: 'round' },
    { strokeLinejoin: 'bevel' }
  ], {
    duration: 1000,
    iterations: Infinity
  });

  // 让动画在鼠标移动时暂停
  path.addEventListener('mousemove', () => {
    animation.pause();
  });

  // 让动画在鼠标离开时继续播放
  path.addEventListener('mouseout', () => {
    animation.play();
  });
</script>

上面的代码创建一个SVG路径，并设置其描边的连接点样式为miter。然后，它创建一个动画，让描边的连接点样式随着时间的推移逐渐变化为round和bevel。最后，它添加两个事件侦听器，让动画在鼠标移动时暂停，在鼠标离开时继续播放。

stroke-dasharray动画

stroke-dasharray动画可以用来改变描边的虚线样式，从而产生一些有趣的动画效果。例如，我们可以让描边的虚线样式随着时间的推移逐渐变化，或者让描边的虚线样式随着鼠标的移动而变化。

<svg width="200" height="200">
  <path d="M 0 100 L 200 100" stroke="red" stroke-width="10" stroke-dasharray="10, 5" />
</svg>

<script>
  const path = document.querySelector('path');

  // 创建一个动画，让描边的虚线样式随着时间的推移逐渐变化
  const animation = path.animate([
    { strokeDasharray: '10, 5' },
    { strokeDasharray: '5, 10' },
    { strokeDasharray: '10, 15' }
  ], {
    duration: 1000,
    iterations: Infinity
  });

  // 让动画在鼠标移动时暂停
  path.addEventListener('mousemove', () => {
    animation.pause();
  });

  // 让动画在鼠标离开时继续播放
  path.addEventListener('mouseout', () => {
    animation.play();
  });
</script>

上面的代码创建一个SVG路径，并设置其描边的虚线样式为10, 5。然后，它创建一个动画，让描边的虚线样式随着时间的推移逐渐变化为5, 10和10, 15。最后，它添加两个事件侦听器，让动画在鼠标移动时暂停，在鼠标离开时继续播放。

stroke-dashoffset动画

stroke-dashoffset动画可以用来改变描边的虚线偏移量，从而产生一些有趣的动画效果。例如，我们可以让描边的虚线偏移量随着时间的推移逐渐增加或减少，或者让描边的虚线偏移量随着鼠标的移动而变化。

<svg width="200" height="200">
  <path d="M 0 100 L 200 100" stroke="red" stroke-width="10" stroke-dasharray="10, 5" stroke-dashoffset="10" />
</svg>

<script>
  const path = document.querySelector('path');

  // 创建一个动画，让描边的虚线偏移量随着时间的推移逐渐增加
  const animation = path.animate([
    { strokeDashoffset: 10 },
    { strokeDashoffset: 0 }
  ], {
    duration: 1000,
    iterations: Infinity
  });

  // 让动画在鼠标移动时暂停
  path.addEventListener('mousemove', () => {
    animation.pause();
  });

  // 让动画在鼠标离开时继续播放
  path.addEventListener('mouseout', () => {
    animation.play();
  });
</script>