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

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

---

类似于下面动画，这种之前就觉得好炫酷

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

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

---

首先让我们来实现一个描绘图形边框的小例子，如下图：

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

  
  

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

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

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

  
  

   
   
.star-path{ 
         
   
   
    fill: none;
   
   
    stroke-width:10;
   
   
    stroke:#d3dce6;
   
   
    stroke-linejoin:round;
   
   
    stroke-linecap:round;
   
   
}
   
   
.star-fill{ 
         
   
   
    fill: none