svg路径动画

前言

最近在开发大屏看板，UI让做一个这样的效果

本来也简单，UI给个git动图放上就好了。但是UI给的图有四五十m，实在是太大了。后来想到了svg路径动画，之前从来没有搞过，就研究了下，由于svg没怎么研究过，水平有限，做成的效果差了些。

实现

原理

svg图片本质上就是由一些标签代码组成的，可以像html一样给某些标签添加动画。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path  d="M5 20 l215 0" />
  </g>
</svg>
1
2
3
4
5

这里需要用到Stroke 属性和渐变的知识，具体用法见：

SVG Stroke 属性
SVG 渐变 - 线性

stroke-dasharray
strokedasharray属性用于创建虚线，一般要提供两组数据

path{
     stroke-dasharray:20 10;
}
1
2
3

第一个值可以理解为实线宽度，第二个值理解为间隔宽度。效果如下：

stroke-dashoffset
用于修改虚线的偏移量

示例1

<template>
    <div>
        <svg width="731px" height="72px" viewBox="0 0 731 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>路径</title>
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path id="path" d="M730.5,71.3725337 L703.392856,49.3529826 C700.457722,46.8023745 697.911346,45.5270705 695.753728,45.5270705 C693.59611,45.5270705 637.336621,42.0701662 526.975259,35.1563577 C525.291584,35.2901978 523.991597,35.5387822 523.075299,35.9021109 C522.159,36.2654395 492.4668,47.9500585 433.998699,70.9559677 C432.594046,71.5113891 430.86492,71.6502444 428.811321,71.3725337 C426.757721,71.0948231 283.820614,47.4892111 5.68434189e-14,0.555697885"
                      stroke="#979797"></path>
            </g>
        </svg>
    </div>
</template>

<script>
export default {
};
</script>

<style lang="scss" scoped>
#path{
  stroke-dasharray: 1000 1100; 
  animation: dash 5s linear infinite;
}
@keyframes dash {
  0%{
    stroke-dashoffset: 1100;
  }

  100%{
    stroke-dashoffset: 1;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

示例2

这与我们想要的是有区别的，我们需要的是显示一部分线，而不是全部显示。这里我们可以修改stroke-dasharray 属性来实现

stroke-dasharray:10 100;
1

这样我们在改变偏移量时，只需要保证显示第一段就可以实现只显示一部分线条

<template>
    <div>
        <svg width="731px" height="72px" viewBox="0 0 731 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>路径</title>
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path id="path" d="M730.5,71.3725337 L703.392856,49.3529826 C700.457722,46.8023745 697.911346,45.5270705 695.753728,45.5270705 C693.59611,45.5270705 637.336621,42.0701662 526.975259,35.1563577 C525.291584,35.2901978 523.991597,35.5387822 523.075299,35.9021109 C522.159,36.2654395 492.4668,47.9500585 433.998699,70.9559677 C432.594046,71.5113891 430.86492,71.6502444 428.811321,71.3725337 C426.757721,71.0948231 283.820614,47.4892111 5.68434189e-14,0.555697885"
                      stroke="#979797"></path>
            </g>
        </svg>
    </div>
</template>

<script>
export default {
};
</script>

<style lang="scss" scoped>
#path{
  stroke-dasharray: 150 700;
  animation: dash 8s linear infinite;
}
@keyframes dash {
  0%{
    stroke-dashoffset: 800;
  }

  100%{
    stroke-dashoffset: 150;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

示例3

到这里起始就差不多了，案例中的线条是有渐变色的，我们可以给线条加上渐变色

 <svg width="731px" height="72px" viewBox="0 0 731 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>路径</title>
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path id="path" d="M730.5,71.3725337 L703.392856,49.3529826 C700.457722,46.8023745 697.911346,45.5270705 695.753728,45.5270705 C693.59611,45.5270705 637.336621,42.0701662 526.975259,35.1563577 C525.291584,35.2901978 523.991597,35.5387822 523.075299,35.9021109 C522.159,36.2654395 492.4668,47.9500585 433.998699,70.9559677 C432.594046,71.5113891 430.86492,71.6502444 428.811321,71.3725337 C426.757721,71.0948231 283.820614,47.4892111 5.68434189e-14,0.555697885"
                  stroke="url(#grad)"></path>
                  <!-- stroke="#979797"  -->
        </g>
        <defs>
            <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%">
                <stop  offset="0%" style="stop-color: rgba(204,226,255,0.7);"></stop>
                <stop  offset="20%" style="stop-color: rgba(204,226,255,0.5);"></stop>
                <stop  offset="40%" style="stop-color: rgba(204,226,255,0.3);"></stop>
                <stop  offset="60%" style="stop-color: rgba(204,226,255,0.1);"></stop>
            </linearGradient>
        </defs>
    </svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

最终效果

<template>
    <div>
        <svg width="731px" height="72px" viewBox="0 0 731 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>路径</title>
            <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <path id="path" d="M730.5,71.3725337 L703.392856,49.3529826 C700.457722,46.8023745 697.911346,45.5270705 695.753728,45.5270705 C693.59611,45.5270705 637.336621,42.0701662 526.975259,35.1563577 C525.291584,35.2901978 523.991597,35.5387822 523.075299,35.9021109 C522.159,36.2654395 492.4668,47.9500585 433.998699,70.9559677 C432.594046,71.5113891 430.86492,71.6502444 428.811321,71.3725337 C426.757721,71.0948231 283.820614,47.4892111 5.68434189e-14,0.555697885"
                      stroke="url(#grad)"></path>
                      <!-- stroke="#979797"  -->
            </g>
            <defs>
                <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%">
                    <stop offset="0%" style="stop-color: rgba(204,226,255,0.7);"></stop>
                    <stop offset="20%" style="stop-color: rgba(204,226,255,0.5);"></stop>
                    <stop offset="40%" style="stop-color: rgba(204,226,255,0.3);"></stop>
                    <stop offset="60%" style="stop-color: rgba(204,226,255,0.1);"></stop>
                </linearGradient>
            </defs>
        </svg>
    </div>
</template>

<script>
export default {
};
</script>

<style lang="scss" scoped>
#path{
  stroke-dasharray: 150 700;
  animation: dash 8s linear infinite;
}
@keyframes dash {
  0%{
    stroke-dashoffset: 800;
  }

  100%{
    stroke-dashoffset: 150;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41