简单聊一聊那些svg的沿路径运动

之前遇见动画就很想用css实现，显然有些效果是我们力所不能及，实现起来麻烦，效果不好，让人捉急。其实归结起来，不同的动画有自己的优势，根据实际情况进行取舍。本文就告诉大家如何用SVG写出个简单动画。就让我们以路径动画为例来说明吧。

好吧，就算不说这个，没学习之前，svg实现的loading我也不知道怎么搞得。

当然SVG肯定不是只是来做这个的啦，这只是人家神奇的一部分。SVG的优势是 跨设备能力强、体积小、图像可透明，可以与js交互等等等等，在这里不一一介绍啦。我们直接从小例子开始,动手实现个按路径运动的动画。

要描绘如上图的五角星图形，我们首先应该确定各个角的坐标，然后将它们连接起来就好了。说起来简单，做起来其实更简单，简单代码实现如下：

1. <svg version="1.1"
2. xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500">
3.    <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85"  class="star-path"></polygon>
4.    <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85"  class="star-fill"></polygon >
5. </svg>

在以上的代码中，polygon 标签是svg多边形标签，points 属性定义多边形每个角的 x 和 y 坐标。通过class为star-path的标签来实现我们图中的灰色轨迹，通过class为star-fill的标签来实现描绘的动画。

上边我们实现了五角星的图形，下面我们就结合css，来完成这个完整的描绘动画：

1. .star-path{
2.    fill: none;
3.    stroke-width:10;
4.    stroke:#d3dce6;
5.    stroke-linejoin:round;
6.    stroke-linecap:round;
7. }
8. .star-fill{
9.    fill: none;
10.    stroke-width:10;
11.    stroke:#ff7700;
12.    stroke-linejoin:round;
13.    stroke-linecap:round;
14.    stroke-dasharray: 782;
15.    stroke-dashoffset: 0;
16.    animation: starFill 2s ease-out infinite;
17. }
18. @keyframes starFill {
19.    0%{
20.        stroke-dashoffset:782;
21.    }
22.    100%{
23.        stroke-dashoffset: 0;
24.    }
25. }

在上面的代码中，最核心的属性就是 stroke-dasharray和stroke-dashoffset 。 stroke-dasharray：定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数。 stroke-dashoffset：定义虚线描边的偏移量。 在上面代码中，stroke-dasharray代表虚线之间的间距大小。当我们设置了间距足够长的时候，以至于大于我们图形的总边长，就会达到我们想要的效果。一开始我们的短划线是0，缺口是全部长度，随动画的进行，短划线的长度慢慢增长为图形总边长的全部长度，达到了慢慢充满全部的效果。另外，我们要知道路径长度也可以借助 如下代码path.getTotalLength() 函数获取路径的长度。

1. document.querySelector(‘.star-path‘).getTotalLength();

除此之外，我们还可以改变偏移 stroke-dashoffset 来达到效果，将虚线的偏移量设置为 0，此时我们看到的路径描边就是没有间断的连续曲线，通过设置虚线偏移量等于曲线的长度，那该曲线恰好“消失”，代码如下：

1.  .star-path{
2.    fill: none;
3.    stroke-width:10;
4.    stroke:#d3dce6;
5.    stroke-linejoin:round;
6.    stroke-linecap:round;
7. }
8. .star-fill{
9.    fill: none;
10.    stroke-width:10;
11.    stroke:#ff7700;
12.    stroke-linejoin:round;
13.    stroke-linecap:round;
14.    stroke-dasharray: 1340;
15.    stroke-dashoffset: 0;
16.    animation: starFill 2s ease-out infinite;
17. }
18. @keyframes starFill {
19.    0%{
20.        stroke-dashoffset:1340;
21.    }
22.    100%{
23.        stroke-dashoffset: 0;
24.    }
25. }

很多时候我们可以运用这种方法到我们运营活动项目中，stroke-dasharray 和 stroke-dashoffset 是创造大量 SVG 路径动画所要用到的两个重要属性，掌握原理就可以给各种图形描边

1. <svg width="500" height="500">
2.  <path d="M100 150 L200 50 L300 150 L400 50 Z"
3.        stroke="#ccc" stroke-width="2"
4.        fill="none"
5.  />
6.  <circle r="20" x="150" y="0" style="fill:#336622;">
7.    <animateMotion
8.      dur="3s"
9.      repeatCount="indefinite"
10.      rotate="auto"
11.      path="M100 150 L200 50 L300 150 L400 50 Z" />
12.  </circle>
13. </svg>

path标签用于指定一条运动路径，从点(100,150)到(200,50)再到(300,150)再到(400,50)最后再链接起点。 我们用了svg的animateMotion动画标签。repeatCount属性描述动画的重复次数，indefinite是无限循环，dur属性描述动画的持续时间，我们这里让整个动画持续3秒。 我们用start和end可以控制整个动画的开始结束时间，而且如果我们想点击控制运动的开始可以加入begin="click"。

当然我们实现的很简单的效果，如果涉及到想元素自动根据运动路径的角度来改变它的运动方向，我们可以使用rotate设置为auto，想让元素在外围运动，可以设置rotate="auto-reverse"。

另外，当路径复杂的时候再用path属性来描述就显得很多余和麻烦，这时候我们可以使用标签来指定运动路径：

1. <svg width="500" height="500">
2.  <path d="M100 150 L200 50 L300 150 L400 50 Z"
3.        stroke="#ccc" stroke-width="2"
4.        fill="none"
5.        id="myPath"
6.  />
7.  <circle r="20" x="150" y="0" style="fill:#336622;">
8.    <animateMotion
9.      dur="6s"
10.      begin="click"
11.      repeatCount="indefinite"
12.      rotate="auto">
13.      <mpath xlink:href="#myPath" />
14.    </animateMotion>
15.  </circle>
16. </svg>

以上是svg按路径运动的典型例子，我们用代码方式进行剖析。svg很多属性和当时学习css动画属性很相似，很方便学习。很多时候动画就是简单组成了复杂，或者没有从简单思考显得复杂。我们看到酷炫的动效可能要复杂一些，但看完本文你是不是也能完成自己的小动画了呢？

原文地址：https://www.cnblogs.com/zhuanzhuanfe/p/8596545.html