svg线条动画基础

先介绍一个Stroke的几个属性：

• stroke 表示描边颜色。一般有如下类型值：none, currentColor, <color>. none表示没有颜色，<color>就是常规的颜色值。currentColor继承父标签的color颜色值。
• stroke-width 表示描边的粗细。
• stroke-linecap 表示描边端点表现方式。可用值有：butt, round, square, inherit. 表现如下图：
  
  

• stroke-linejoin 表示描边转角的表现方式。可用值有：miter, round, bevel, inherit. 表现如下图：
  
  
• stroke-miterlimit 表示描边相交（锐角）的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思，值越大，损耗越小。
• stroke-dasharray 表示虚线描边。可选值为：none, <dasharray>, inherit. 其中，none表示不是虚线；<dasharray>为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
• stroke-dashoffset 表示虚线的起始偏移。可选值为：<percentage>, <length>, inherit. 百分比值，长度值，继承。
• stroke-opacity 表示描边透明度。默认是1

动画效果相关的就是stroke-dasharray和stroke-dashoffset两个属性来实现的

-----------------------------------------------------------------------------

先创建一个AVG画布

定义样式：

 <style>
        .svgStyle{
            border: solid 1px #000000;
            margin: 0 auto;
            display: block
        }
        .pathStyle{
            stroke:#000000;
            stroke-width:2px;
            fill:none;
            stroke-dasharray:0px;
            stroke-linecap:round;
            stroke-dashoffset:0;
        }
    </style>

创建SVG：并随意画个图形

  <svg width="1200px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgStyle">
            <path d="M 0 300  Q 200 500  400 300 Q 600 500  800 300" class="pathStyle" />
    </svg>

-------------------------------------------------------------------------------------------------------------------------------

通过改变stroke-dasharray和stroke-dashoffset两个属性我们可以发现动画的实现原理是

首先把stroke-dasharray的值设成超过线条长度的值，这时候线是看不到，只显示空白部分，然后通过strke-dashoffset的偏移属性让线条逐渐显示出来。

改变strke-dashoffset的属性实现动画，可以用CSS也可以用JS方法

css方法:

   .pathStyle{
            stroke:#000000;
            stroke-width:2px;
            fill:none;
            stroke-dasharray:500;
            stroke-linecap:round;
            stroke-dashoffset:0;
            animation: dash 5s linear linear infinite;
            -webkit-animation:dash 5s infinite linear both;
        }


        @-webkit-keyframes dash {
            from{
                stroke-dashoffset: 1000;
            }
            to {
                stroke-dashoffset: 0;
            }
        }
        @keyframes dash {
            from{
                stroke-dashoffset: 1000;
            }
            to {
                stroke-dashoffset: 0;
            }
        }

--------------------------------------------------------------------------------------------------------------------------------

JS方法

注意： 如果想要获取path的长度，要用到getTotalLength();方法。但是这个方法只能用于path！！如果你的svg图形是直接通过line、circle等直接画的。是不能用这个方法的;

<script>
        var path=document.querySelector('.pathStyle');
        var length=path.getTotalLength();
        var init=1000;
        setInterval(function(){
            --init;
            if(init<0){
                init=1000
            }
            path.style.strokeDashoffset=init
        },10)
</script>

------------------------------------------------------------------------------------------------------------------------------------------------------------------

参考：http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

http://www.cnblogs.com/gbin1/p/4043355.html