svg动画之动态描边效果

1、首先先做一个简单的线一点一点画出来的效果，主要使用svg中的“strokeDasharray”、“strokeDashoffset”属性，通过css3中的transtion改变strokeDashoffset来实现动画。

注：path中的数据通过在ai中划线后存储为svg格式就可以拿到；

效果图：

代码如下：

<svg class="move_line1" xmlns="http://www.w3.org/2000/svg" width="600px" height="150px">
 <path d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191
 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7
 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4" fill="none">
 </path>
 </svg>
 <script>
 //svg 动画一般用transtion和animation
 var path1 = document.querySelector(".move_line1 path");
 var length1 = path1.getTotalLength();
 //清除动作
 path1.style.transtion = path1.style.WebkitTransition = "none";
 //设置起点
 path1.style.strokeDasharray = length1 + ' ' + length1;
 path1.style.strokeDashoffset = length1;
 //获取一个区域，获取相关的样式，让浏览器寻找一个起始点
 path1.getBoundingClientRect();
 //定义动作
 path1.style.transition = path1.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
 //GO
 path1.style.strokeDashoffset = '0';
 </script>

2、与画线的效果，接下来用同样的原理来画一个“蓝胖子”，蓝胖子同样是需要用ai画出来，将所有的元素存在数组里面遍历时改变transtion中的during和delay从而实现划线的先后顺序。

效果图：

代码如下：

<div class="move_line2">
 <svg xmlns="http://www.w3.org/2000/svg" width="600px" height="500px">
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M335.088,373.962c23.125-7.219,54.068,12.896,69.115,44.93s8.498,63.855-14.625,71.074c-23.125,7.221-54.068-12.895-69.115-44.928
 S311.965,381.183,335.088,373.962z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M209.983,9.426c87.495,4.372,158.857,76.303,158.857,160.122c0,46.699-22.158,87.484-56.91,113.702
 c22.268,46.217,33.992,89.483,14.348,125.051c4.02-7.537,6.611-15.313,8.555-23.193c11.648,26.85,14.068,52.875-6.887,75.711
 c-64.363,13.082-86.986-18.811-194.209-8.391l-3.699-107.049l-0.92-22.406l0.873,22.42c-22.874-5.814-45.173-11.861-65.204-17.99
 l10.062-44.714l49.898,2.646c-43.949-22.82-74.717-76.747-73.621-131.665C51.125,69.85,122.487,5.053,209.983,9.426L209.983,9.426z
 "></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M127.866,299.414c53.621-10.396,87.391,17.968,94.62,65.603c4.205,55.014-54.168,83.619-90.647,43.756L127.866,299.414
 L127.866,299.414z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M129.575,285.055c66.294-2.505,120.602-16.571,186.912-12.424c7.652,1.256,7.152,14.774-1.5,16.288
 c-60.402-0.255-119.506,7.59-181.203,10.898c-14.98-0.357-17.425-6.778-13.476-11.896
C123.096,284.311,125.291,285.217,129.575,285.055L129.575,285.055z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M304.605,309.06c-8.162-29.413-11.222-57.848-11.791-87.262c-17.005,8.999-41.066-6.278-40.584-17.486
 c-7.021,31.961-10.248,65.548-9.677,100.763"></path>
 <ellipse fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="279.449" cy="193.855" rx="30.133" ry="30.788"></ellipse>
 <circle fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" cx="90.681" cy="49.358" r="27.412"></circle>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M124.459,285.183c-36.085-18.873-63.232-58.725-71.063-102.821c-0.052-0.295-0.019-0.163-0.069-0.457
 c-43.423-5.859-35.264-73.124,0.427-55.668c0.067-0.353,0.019-0.145,0.088-0.496c8.143-41.139,34.012-75.528,69.743-96.045
 c98.492,58.677,146.511,142.883,108.603,245.678c-33.24,3.419-66.109,8.303-102.612,9.683
C127.472,285.135,125.873,284.957,124.459,285.183L124.459,285.183z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
M116.536,84.903c15.737,3.062,31.281,7.092,46.398,13.256"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
M106.601,103.6c18.341,9.617,40.867,18.074,61.067,27.228"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
M89.075,124.2c17.643,12.621,37.999,25.581,60.603,38.823"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
M73.603,179.492c6.986,16.398,13.1,33.481,21.251,48.996c17.011,32.372,42.229,39.539,76.563,39.358
 c39.524-0.208,50.969-18.655,47.774-57.118C215.006,160.335,155.059,151.715,73.603,179.492L73.603,179.492z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M219.192,210.728c-4.165-50.15-63.557-58.928-144.414-31.635c-65.936,21.271-63.065-77.932-17.728-51.101"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M128.618,261.235c2.627-35.702,22.275-49.91,52.536-47.821c-5.862,4.452-11.342,9.899-14.83,16.185
 c13.539-21.654,32.21-27.477,53.206-13.829c1.774,35.034-10.356,51.879-48.112,52.077
C155.131,267.931,140.898,266.362,128.618,261.235L128.618,261.235z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M173.097,17.836c8.253,8.589,0.384,26.394-17.518,39.635c-17.901,13.242-39.232,17.036-47.484,8.448
 c-8.253-8.589-0.384-26.395,17.517-39.635C143.514,13.042,164.844,9.248,173.097,17.836L173.097,17.836z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M136.222,26.971c2.455,2.555,0.114,7.852-5.211,11.791c-5.326,3.939-11.672,5.068-14.127,2.514
 c-2.455-2.556-0.114-7.853,5.211-11.791C127.421,25.544,133.767,24.416,136.222,26.971L136.222,26.971z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M90.681,22.774c1.076,0,2.138,0.063,3.183,0.187
 c-0.154,3.607-3.144,6.503-6.788,6.503c-3.034,0-5.614-2.008-6.483-4.761C83.718,23.458,87.122,22.774,90.681,22.774L90.681,22.774
 z"></path>
 <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-width="2.8347" stroke-miterlimit="2.4142" d="
 M133.591,410.618c-0.59-0.598-1.174-1.213-1.753-1.846l-2.156-59.363c14.439-5.217,3