自己动手写SVG路径动画(零基础三步曲)

2020-04-12 · 树下魅狐 · · 本文共1,477个字,预计阅读需要7分钟。

在我个人的博客网站树下魅狐的首页,使用了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 id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
        <g>
            <path id="p1" class="cls-1"
                  d="M86.87,39.76c0-27.22-19.94-35.65-44.18-35.65H2V118.54H28V77.37h13.6l21.84,41.17h29L66.49,72.78C78.71,67.26,86.87,56.57,86.87,39.76ZM28,24.66H40.58c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H28Z"/>
            <path id="p2" class="cls-1"
                  d="M132.31,4.11,96.67,118.54h26.51l7-27.22H164.6l6.94,27.22H199L163.36,4.11Zm3,67,2.71-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.75,12.08,6.24,25.48,9.14,36.9l2.68,10.55Z"/>
            <path id="p3" class="cls-1"
                  d="M257.33,44.66l-3.79,15.83h-.71L249,44.66,237.77,4.11H210.62V118.54h21.55V83.11c0-12.88-2.17-40.78-3.48-53.15h.61l8.19,30.71,9.06,27.57h12.57L268,60.67,276.8,30h.52c-1.21,12.37-3.47,40.27-3.47,53.15v35.43h21.91V4.11H268.59Z"/>
            <path id="p4" class="cls-1"
                  d="M358.53,2c-27.25,0-46,20.56-46,58.8,0,39.14,18.77,59.85,46,59.85s46-20.71,46-59.85C404.56,22.56,385.79,2,358.53,2Zm0,96.28c-11.93,0-19.47-12.8-19.47-37.48,0-23.78,7.54-36.43,19.47-36.43S378,37,378,60.8C378,85.48,370.47,98.28,358.53,98.28Z"/>
            <path id="p5" class="cls-1"
                  d="M483.46,54l-14-5.93c-11-4.12-18.64-6.64-18.64-13.52,0-6.69,5.79-10.22,14.32-10.22,11.18,0,18.31,3.15,26.37,8.94L504.55,17a55.46,55.46,0,0,0-38-15c-24.86,0-41.93,15.15-41.93,34.1,0,16.65,11.57,26.38,24.25,31.2l14.91,6.36c10.83,4.54,17.63,6.53,17.63,14.77,0,5.59-5.08,9.85-16.07,9.85s-21.76-4.86-30.42-12l-14.86,17.79a65.91,65.91,0,0,0,43.57,16.53c28.32,0,44.28-16.48,44.28-35.5C507.9,69,498.44,59.66,483.46,54Z"/>
            <polygon id="p6" class="cls-1"
                     points="521.97 25.82 556.28 25.82 556.28 118.54 582.18 118.54 582.18 25.82 616.48 25.82 616.48 4.11 521.97 4.11 521.97 25.82"/>
            <polygon id="p7" class="cls-1"
                     points="664.01 70.49 706.45 70.49 706.45 48.77 664.01 48.77 664.01 25.82 713.97 25.82 713.97 4.11 638.11 4.11 638.11 118.54 715.72 118.54 715.72 96.82 664.01 96.82 664.01 70.49"/>
            <path id="p8" class="cls-1"
                  d="M764.4,4.11,728.76,118.54h26.5l7-27.22h34.43l7,27.22h27.45L795.44,4.11Zm3,67,2.7-10.55c2.9-11.42,6.08-24.82,8.88-36.9h.7c2.76,12.08,6.24,25.48,9.14,36.9l2.69,10.55Z"/>
            <path id="p9" class="cls-1"
                  d="M935.14,118.54,909.27,72.78c12.22-5.53,20.38-16.21,20.38-33,0-27.22-19.94-35.65-44.19-35.65H844.78V118.54h26V77.37h13.6l21.84,41.17ZM870.73,24.66h12.63c13.6,0,20.9,3.8,20.9,15.1s-7.3,17.06-20.9,17.06H870.73Z"/>
        </g>
    </svg>

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

第二步:获取路径长度

我们将上述的代码插入到事先准备好的HTML文件中,然后通过JavaScript来获得每个路径的总长度。首先,将SVG代码插入到HTML代码中,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>SVG TEXT ANIMATION</title>
</head>
<body>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 938.57 122.65">
        //...
    </svg>
    <script src="js/app.js"></script>
</body>
</html>

接下来,在app.js中通过querySelectorAll()函数获取所有的路径,并通过getTotalLength()函数来获得每一个路径的总长度,代码如下:

const paths = document.querySelectorAll("#logo path");
const polygons = document.querySelectorAll("#logo polygon");
for(let i=0;i<paths.length;i++){
    console.log(paths[i].getAttribute("id")+" -> "+paths[i].getTotalLength());
}
for(let i=0;i<polygons.length;i++){
    console.log(polygons[i].getAttribute("id")+" -> "+polygons[i].getTotalLength());
}

说明:

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

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

app.js:3 p1 -> 587.9400634765625
app.js:3 p2 -> 537.8978271484375
app.js:3 p3 -> 756.9060668945312
app.js:3 p4 -> 523.8944091796875
app.js:3 p5 -> 525.183349609375
app.js:3 p8 -> 537.9104614257812
app.js:3 p9 -> 587.8800048828125
app.js:8 p6 -> 417.8800048828125
app.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文件中的函数主要是辅助我们计算每个图形的路径长度,在动画制作完成后,可以将其删除。

视频教程

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