准备项目
- 万事从头来,
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;