零基础三步曲教程自己动手写SVG路径动画_wps

在我个人的博客网站树下魅狐的首页，使用了SVG路径动画来绘制LOGO 。该动画采用SVG CSS的方式完成的。今天在这里快速的分享一下制作过程。

关于SVG

SVG是用于描述二维图形的一种语言。SVG允许使用三种类型的图形对象：矢量图形(例如：由直线和曲线组成的路径)，图像和文本。图形对象可以进行分组，样式设置，转换和合成。SVG和XML文件混合使用时，它可以使用XML语法，当SVG和HTML文件混合使用时，它又可以使用HTML的语法。
SVG的全称是Scalable Vector Graphics，翻译过来是可伸缩矢量图形。因此，SVG图形在放大或缩小的情况下其图形的质量不会有损失。SVG除了可以制作图像外，还可以用于制作各种小动画。在使用SVG之前，先得了解一下各大浏览器对其兼容性，下面通过一张图片来详细了解：

基于CSS和SVG实现路径动画

在开始介绍制作过程之前，通过一个动画了解一下最终的动画形态：

第一步：SVG文件

第一步，我们可以通过Adobe Illustrator软件生成一个自己想要的SVG路径。在本例中，我将字符“RAMOSTEAR”通过Adobe Illustrator生成了路径并导出到编辑器中，代码如下：
【零基础三步曲教程自己动手写SVG路径动画】

借助工具，可以快速生成我们想要的图形，你也可以手动书写，但效率很低（不推荐）

第二步：获取路径长度

我们将上述的代码插入到事先准备好的HTML文件中，然后通过JavaScript来获得每个路径的总长度。首先，将SVG代码插入到HTML代码中，如下：
SVG TEXT ANIMATION//...
接下来，在app.js中通过querySelectorAll()函数获取所有的路径，并通过getTotalLength()函数来获得每一个路径的总长度，代码如下：

const paths = document.querySelectorAll("#logo path");const polygons = document.querySelectorAll("#logo polygon");for(let i=0;i " paths[i].getTotalLength());}for(let i=0;i " polygons[i].getTotalLength());}

说明：
在使用Adobe Illustrator导出SVG时，不完全是路径(path),还参杂着两个多边形(polygon),所以还需获得polygon的路径长度。

在浏览器中打开HTML文件，你可以在控制台中看到如下的日志信息：

app.js:3 p1 -> 587.9400634765625app.js:3 p2 -> 537.8978271484375app.js:3 p3 -> 756.9060668945312app.js:3 p4 -> 523.8944091796875app.js:3 p5 -> 525.183349609375app.js:3 p8 -> 537.9104614257812app.js:3 p9 -> 587.8800048828125app.js:8 p6 -> 417.8800048828125app.js:8 p7 -> 568.8799438476562

这样，我们就获得了所有图形的路径长度。接下来，就可以在CSS文件中操作这些参数。

第三步：样式文件

前面我们已经获取了所有图形的路径总长度，现在就可以利用CSS3的@keyframes和animation来定义动画。动画的定义很简单，主要是改变路径的stroke-dasharray和stroke-dashoffset两个参数。stroke-dasharray用于设置路径的总长度，stroke-dashoffset用于设置路径的偏移量。一开始，将各路径的长度和偏移量都设置为同一个值，然后再利用animation将偏移量变为0，这样就可以形成一个类似手写文字的动画效果。主要的CSS代码如下：

.cls-1{stroke: #fff;stroke-width: 2px;}#logo{width: 80%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);animation: text-fill-anim 0.5s ease forwards 4s;}#p1{stroke-dasharray: 587.9400634765625;stroke-dashoffset: 587.9400634765625;animation: text-anim 3s ease forwards;}#p2{stroke-dasharray: 537.8978271484375;stroke-dashoffset: 537.8978271484375;animation: text-anim 3s ease forwards 0.2s;}#p3{stroke-dasharray: 756.9060668945312;stroke-dashoffset: 756.9060668945312;animation: text-anim 3s ease forwards 0.4s;}#p4{stroke-dasharray: 523.8944091796875;stroke-dashoffset: 523.8944091796875;animation: text-anim 3s ease forwards 0.6s;}#p5{stroke-dasharray: 525.183349609375;stroke-dashoffset: 525.183349609375;animation: text-anim 3s ease forwards 0.8s;}#p6{stroke-dasharray: 417.8800048828125;stroke-dashoffset: 417.8800048828125;animation: text-anim 3s ease forwards 1s;}#p7{stroke-dasharray: 568.8799438476562;stroke-dashoffset: 568.8799438476562;animation: text-anim 3s ease forwards 1.2s;}#p8{stroke-dasharray: 537.9104614257812;stroke-dashoffset: 537.9104614257812;animation: text-anim 3s ease forwards 1.4s;}#p9{stroke-dasharray: 587.8800048828125;stroke-dashoffset: 587.8800048828125;animation: text-anim 3s ease forwards 1.6s;}@keyframes text-anim {to{stroke-dashoffset: 0;}}@keyframes text-fill-anim {to{fill: white;}}

这样，通过简单的三步，一个SVG CSS的路径动画就制作完成了。

说明：
JS文件中的函数主要是辅助我们计算每个图形的路径长度，在动画制作完成后，可以将其删除。

视频教程

你可以通过下面的一段视频，了解整个动画的制作过程。

视频加载中...

零基础三步曲教程 自己动手写SVG路径动画