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

准备项目

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

准备SVG

  1. 推荐在阿里矢量素材图标库进行下载
  1. 小编提供一个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;
相关推荐
蒜蓉大猩猩19 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
王解1 小时前
一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)
前端·perttier
乐闻x1 小时前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
檀越剑指大厂1 小时前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶1 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam1 小时前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑1 小时前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen1 小时前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈1 小时前
前端应用界面的展示与优化(记录)
前端
多多*2 小时前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式