SVG动画的简单应用

---

本文主要介绍利用stroke-dasharray和stroke-dashoffset实现svg画线动画、loading加载动画
对svg基础不熟悉的同学可以先看这里https://juejin.cn/post/6844903589807128590

svg动画基础

stroke-dasharray

这个属性是用来定义点划线（虚线）
先来看下效果

    <svg width="100" height="100">
      <path d="M2 2 L98 2" stroke="pink" stroke-width="4" />
      <path
        d="M2 10 L98 10"
        stroke="pink"
        stroke-width="4"
        stroke-dasharray="10px"
      />
    </svg>

第2条直线设置属性stroke-dasharray="10px"，可以看到实线和虚线间隔都是10px。
该属性还可以设置多个值，我们接着尝试新建第3条直线将属性设为stroke-dasharray="10px 5px"

我们发现第一个值10px是实线长度，第二个5px是虚线长度，往后都是循环。

stroke-dashoffset

这个属性是配套stroke-dasharray属性使用的，它定义了点划线的偏移量。
我们将第3条直线设置stroke-dashoffset="5px"， 查看效果：

我们发现第3条直线往左偏移了5px，如果该值设置为负值，则会往右偏移

svg动画

目前我们已经学习了stroke-dasharray和stroke-dashoffset，知道了其基本用法用途，配合transition动画就能实现一些出其不意的效果了

画线过渡效果

实现画线过渡效果的要点：

• stroke-dasharray的值设置为直线的长度
• stroke-dashoffset的值同样设置为直线，将直线实线部分偏移到可见范围外

<style>
    path {
      transition: stroke-dashoffset 0.3s;
    }
    svg:hover #drawLine {
      stroke-dashoffset: 0;
    }
</style>
      <path
        id="drawLine"
        d="M2 40 L98 40"
        stroke="pink"
        stroke-width="4"
        stroke-dasharray="96px"
        stroke-dashoffset="96px"
      />

loading等待动画

实现要点：

• stroke-dasharray的值设置为svg圆形的周长
• stroke-dashoffset的值同样设置为svg圆形的周长，将svg圆形实线部分偏移到可见范围外
• 添加一个旋转动画rotete(360deg)

<style>
    #circle {
      stroke-dasharray: 239px;
      stroke-dashoffset: 239px;
      animation: rotate 1s linear infinite;
      transform-origin: center;
    }
    @keyframes rotate {
      0% {
        stroke-dashoffset: 239px;
      }
      100% {
        stroke-dashoffset: 0px;
        transform: rotate(360deg);
      }
    }
</style>

    <svg width="100" height="100">
      <circle
        id="circle"
        cx="50"
        cy="50"
        r="38px"
        stroke-width="6px"
        stroke="pink"
        fill="none"
      />
    </svg>