svg 动画开发教程通过svg实现炫酷动画效果

准备项目

万事从头来，node及pnpm等开发环境问题请看 # win10 前端环境安装一条龙安装nvm node cnpm pnpm等工具
创建一个vue3的工程,搭建方式请看 # 使用官方命令搭建纯净版vue3工程

准备SVG

推荐在阿里矢量素材图标库进行下载

小编提供一个svg图标代码, 可以直接使用

xml 复制代码

<svg t="1711684250340" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2231" width="200" height="200"><path d="M709.632 525.312zM709.632 525.312c-17.92 0-33.28 12.8-36.352 30.72-14.336 81.408-85.504 142.848-171.008 142.848s-156.672-61.44-171.008-142.848c-3.072-17.92-18.432-30.72-36.352-30.72-23.04 0-40.448 20.992-36.352 43.52 20.48 115.712 121.856 204.288 244.224 204.288 121.856 0 223.232-88.064 244.224-204.288 3.584-22.528-14.336-43.52-37.376-43.52zM663.04 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.16 18.432 45.056 18.432zM341.504 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.672 18.432 45.056 18.432z" fill="#020202" p-id="2232"></path><path d="M512 12.8C236.544 12.8 12.8 236.544 12.8 512s223.744 499.2 499.2 499.2 499.2-223.744 499.2-499.2S787.456 12.8 512 12.8z m0 919.04c-231.936 0-419.84-187.904-419.84-419.84s187.904-419.84 419.84-419.84 419.84 187.904 419.84 419.84-187.904 419.84-419.84 419.84z" fill="#020202" p-id="2233"></path></svg>

开始开发

科普：每一个<path>都是一笔

因为是给笔画添加动画，所以先在<path>上加个id="path" 或者 class 都行。

HTML 复制代码

   <svg
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
    >
      <path
        d="M709.632 525.312zM709.632 525.312c-17.92 0-33.28 12.8-36.352 30.72-14.336 81.408-85.504 142.848-171.008 142.848s-156.672-61.44-171.008-142.848c-3.072-17.92-18.432-30.72-36.352-30.72-23.04 0-40.448 20.992-36.352 43.52 20.48 115.712 121.856 204.288 244.224 204.288 121.856 0 223.232-88.064 244.224-204.288 3.584-22.528-14.336-43.52-37.376-43.52zM663.04 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.16 18.432 45.056 18.432zM341.504 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.672 18.432 45.056 18.432z"
        stroke="#000000"
        fill="none"
        stroke-width="10"
        stroke-linecap="round"
        id="path2"
      ></path>
      <path
        d="M512 12.8C236.544 12.8 12.8 236.544 12.8 512s223.744 499.2 499.2 499.2 499.2-223.744 499.2-499.2S787.456 12.8 512 12.8z m0 919.04c-231.936 0-419.84-187.904-419.84-419.84s187.904-419.84 419.84-419.84 419.84 187.904 419.84 419.84-187.904 419.84-419.84 419.84z"
        stroke="#000000"
        fill="none"
        stroke-width="10"
        stroke-linecap="round"
        id="path"
      ></path>
    </svg>

CSS 复制代码

#path {
  stroke-dasharray: 2500; /* 设置一个足够大的值 */
  stroke-dashoffset: 2500; /* 初始偏移量与 dasharray 相同 */
  animation: draw 2s linear 0s forwards; /* 动画定义 */
}
#path2 {
  stroke-dasharray: 3000; /* 设置一个足够大的值 */
  stroke-dashoffset: 3000; /* 初始偏移量与 dasharray 相同 */
  animation: draw 4s linear 2s forwards; /* 动画定义 */
}
/* 定义关键帧动画 */
@keyframes draw {
  to {
    stroke-dashoffset: 0; /* 描边偏移减少到 0 */
  }
}

结果并不是自己期望的，他是描边，好奇怪。

试了一个简单的svg的图

ini 复制代码

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10 10 H 190 V 190 H 10 L 10 10"
    stroke="#000000"
    fill="none"
    stroke-width="10"
    stroke-linecap="round" 
    id="path"
  ></path>
</svg>

果断怀疑就是svg代码的问题，删除笑脸的svg部分代码

ini 复制代码

<svg
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="200"
      height="200"
    >
      <path
        d="M709.632 525.312zM709.632 525.312c-17.92 0-33.28 12.8-36.352 30.72-14.336 81.408-85.504 142.848-171.008 142.848s-156.672-61.44-171.008-142.848c-3.072-17.92-18.432-30.72-36.352-30.72-23.04 0-40.448 20.992-36.352 43.52 20.48 115.712 121.856 204.288 244.224 204.288 121.856 0 223.232-88.064 244.224-204.288 3.584-22.528-14.336-43.52-37.376-43.52zM663.04 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.16 18.432 45.056 18.432zM341.504 432.128c16.896 0 33.28-6.656 45.056-18.432 11.776-11.776 18.432-28.16 18.432-45.056 0-16.896-6.656-33.28-18.432-45.056-11.776-11.776-28.16-18.432-45.056-18.432-16.896 0-33.28 6.656-45.056 18.432-11.776 11.776-18.432 28.16-18.432 45.056 0 16.896 6.656 33.28 18.432 45.056 11.776 11.264 28.672 18.432 45.056 18.432z"
        stroke="#000000"
        fill="none"
        stroke-width="50"
        stroke-linecap="round"
        id="path2"
      ></path>
      <!-- 这个path是笑脸的圆圈，随便删除一部分 -->
      <path
        d="M512 12.8z m0 919.04c-231.936 0-419.84-187.904-419.84-419.84s187.904-419.84 419.84-419.84 419.84 187.904 419.84 419.84-187.904 419.84-419.84 419.84z"
        stroke="#000000"
        fill="none"
        stroke-width="50"
        stroke-linecap="round"
        id="path"
      ></path>
    </svg>

结果应该是能说明svg的问题了。如何找到合适的svg图呢

svg图制作

需要使用Adobe illustrator

新建文件选择画布，使用铅笔工具，目前发现只有铅笔工具绘制的是可以的

svg的代码直接就贴出来了，删了一些没有必要的,加了一些必要的属性

HTML 复制代码

<svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 559.1 290.8"
      width="1200"
      height="300"
    >
      <path
        d="M79.2,85.4V282.2c0,5.8-.9,13-6.3,15s-8.9-1.1-12.6-3.7c-7.3-5.2-14.7-10.9-18.9-18.7-5.6-10.3-5-23.3-.2-33.9S54.5,221.6,64,214.8c25.5-17.8,57.5-22.8,88.2-28.1,1.9-.3,4-.7,5.3-2.2s1.6-4,1.6-6.2l.6-154.5c-1.1,9.3-1.2,18.5-1.4,27.8-1.5,77.9-2.9,156,6.5,233.3,1,7.7,2,15.4,3.2,23.1"
        transform="translate(-36.8 -17.3)"
        stroke="#000000"
        fill="none"
        stroke-width="4"
        stroke-linecap="round"
        id="hello_h"
      />
      <path
        d="M196.6,212.2a86.3,86.3,0,0,0,49.3-7.5c1.9-.9,4-2.1,4.9-4s.3-5.3-.7-7.8a175.4,175.4,0,0,0-11.2-23.6c-2.5-4.3-6-8.9-10.9-9s-9.9,7-11.6,13c-6.1,21.2-8.3,43.3-8.2,65.4.1,4.9.3,10,2.8,14.2,5,8.2,16.4,9.2,26.1,9.2,7.9,0,16.3-.1,22.9-4.4s9.2-9.5,12.4-15.4c14.5-26.3,26-54,37.6-81.6L367.6,22.8c-42,60.9-65.6,135.8-58.8,209.5.3,2.7.6,5.4,2,7.8,3.6,6.1,12.4,6.1,19.5,5.4a16.7,16.7,0,0,0,7.3-1.8,18.4,18.4,0,0,0,4.4-4.4c42.2-54.6,55.9-125.2,83-188.6,4.3-10.1,9.1-20.4,9.6-31.4-15.2,26.4-30.4,52.9-42.2,81.1s-19.9,58-20.6,88.5c-.4,19.5,2.6,39.8,13.7,55.9,1,1.4,2.1,2.9,3.8,3.5a9,9,0,0,0,5.4.1,51.3,51.3,0,0,0,35.1-28.2"
        transform="translate(-36.8 -17.3)"
        stroke="#000000"
        fill="none"
        stroke-width="4"
        stroke-linecap="round"
        id="hello_ell"
      />
      <path
        d="M497.9,139.8c-5.9,15.7-8,32.6-9,49.3-.7,10.7-.7,22.3,5.8,30.8s15.4,10.9,24.8,12a68,68,0,0,0,25-1.7c7.7-2.1,15.2-5.5,20.8-11.2s7.7-10.9,10.5-17a279.2,279.2,0,0,0,17.3-49.5c1.9-7.6,3.5-15.7,1.1-23.2s-6.9-11.9-11.6-17S572.1,101,565.1,97.9c-5.5-2.4-11.5-3-17.5-2.9C522.4,95.2,506,118.1,497.9,139.8Z"
        transform="translate(-36.8 -17.3)"
        stroke="#000000"
        fill="none"
        stroke-width="4"
        stroke-linecap="round"
        id="hello_o"
      />
    </svg>

CSS 复制代码

#hello_h {
  stroke-dasharray: 1000; /* 设置一个足够大的值 */
  stroke-dashoffset: 1000; /* 初始偏移量与 dasharray 相同 */
  animation: draw 2s linear 0s forwards; /* 动画定义 */
}
#hello_ell {
  stroke-dasharray: 1500; /* 设置一个足够大的值 */
  stroke-dashoffset: 1500; /* 初始偏移量与 dasharray 相同 */
  animation: draw 2s linear 2s forwards; /* 动画定义 */
}
#hello_o {
  stroke-dasharray: 1000; /* 设置一个足够大的值 */
  stroke-dashoffset: 1000; /* 初始偏移量与 dasharray 相同 */
  animation: draw 1s linear 4s forwards; /* 动画定义 */
}

/* 定义关键帧动画 */
@keyframes draw {
  to {
    stroke-dashoffset: 0; /* 描边偏移减少到 0 */
  }
}

stroke-dasharray值获取

ini 复制代码

const path = document.getElementById('path');
const length = path.getTotalLength();
// path.style.strokeDasharray = length;
// path.style.strokeDashoffset = length;

svg 动画开发教程 通过svg实现炫酷动画效果

准备项目

准备SVG

开始开发

svg图制作

stroke-dasharray值获取

svg 动画开发教程通过svg实现炫酷动画效果