SVG之旅：线条之美，玩转SVG线条动画

在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoffset的值为0就可以实现线条自画的一个动画效果。

原理很简单，但在上一篇文章中，看到的仅是一条路径（也就是一条线的自画效果），如果我们想对一图形进行依次自动动效呢？其实也是可以实现的。今天我们在这篇文章中就来学习一下，怎么实现。

先上个效果

扣图的活不能丢

要实现上面效果的图形，就得先要绘制出对应的一些路径效果。不过自已绘制总是蛋疼的。我在网上找了一个图：

然后可以借助对应的绘图软件的钢笔工具，根据图形描边出需要的效果。我使用的是Sketch。

这仅仅是粗略的描出来的路径，为了效果更接近于原图，我们需要再打磨一下。

导出SVG路径

虽然看上去还有丑丑的，事实上这个时候我需要一个美女设计师来帮我。最好是手把手的能教我怎么做。期待中...(^_^)。把刚才绘制的路径，导出一个.svg文件，并把用编辑器打开。并清理不需要的代码，把这些SVG代码放置到HTML中：

<svg width="175px" height="231px" viewBox="0 0 175 231">
    <path d="M4,68.5 C15.5117172,59.8043794 25.3450505,52.4710461 33.5,46.5 C45.7324243,37.5434309 59.5,39.5 63,36.5 C66.5,33.5 59.0969918,4.83258162 67,3 C74.9030082,1.16741838 97.9512056,10.8168783 99.5,32.5 C100,39.5 99.888886,35.5648143 117.5,38.5 C126.5,40 138.081405,46.841093 146,53 C155,60 163.5,67.9635628 163.5,68.5" class="header" fill="none" stroke="#FC4D04" stroke-width="5"></path>
    <path d="M43,77.5 C42.3143438,85.590743 43.0597683,91.1897744 48,96 C52.9402317,100.810226 56.8631639,100.734576 60.5,94.5 C64.1368361,88.2654238 64.6123158,80.7011579 62,74 C59.3876842,67.2988421 55.8263003,65.7476499 51.5,67 C47.1736997,68.2523501 43.6856562,69.409257 43,77.5 Z" class="eye" fill="none" stroke="#FB4B08" stroke-width="2"></path>
    <path d="M108,70.5 C103.173285,74.1494671 102.037015,85.8394525 105,93 C107.962985,100.160547 114.658219,100.038908 120,96 C125.341781,91.9610922 125.660258,80.637289 122.5,73 C119.339742,65.362711 112.826715,66.8505329 108,70.5 Z" class="eye" fill="none" stroke="#F84F04" stroke-width="2"></path>
    <path d="M127.5,122 C128.5,122.5 132.5,114.5 127.5,113 C122.5,111.5 21,112 19.5,112 C18,112 16,134 27.5,149.5 C39,165 44.1240033,175.272736 64,180 C83.8759967,184.727264 101,182.5 120,171.5 C139,160.5 135.222169,157.621052 142.5,146 C149.777831,134.378948 148.5,122.5 151,122 C153.5,121.5 159.5,120 162.5,122 C163.932223,122.954815 164.370326,125.750806 164.258821,128.675882 C164.136763,131.877804 163.356139,135.234403 162.5,136.5 C160.861745,138.921768 151,136 150,140 C149,144 150.763923,145.975983 155.5,147 C160.236077,148.024017 161.7167,147.699962 168.5,140 C175.2833,132.300038 173.536826,132.171852 172,125 C170.463174,117.828148 166.5,115 162.5,113.5 C158.5,112 147.5,112 143,113 C138.5,114 139.185047,135.464729 136.5,138.5 C133.814953,141.535271 125,145.5 119,140 C113,134.5 113.098161,134.086447 104,134.5 C94.9018386,134.913553 96.6264124,141.5 86,141.5 C75.3735876,141.5 74,134.5 64,134.5 C54,134.5 48.8344819,143.597972 42,144 C35.1655181,144.402028 34.4270564,143.216913 30,136.5 C25.5729436,129.783087 26.5,124.5 27.5,122 C28.5,119.5 126.5,121.5 127.5,122 Z" class="mouth" fill="none" stroke="#FC4F04" stroke-width="3"></path>
    <path