SVG描边动画实现过程

准备工具：Adobe AI+PS

一、肯定SVG画布的大小，在PS中切出须要描边效果的区域，以此区域的大小作为SVG容器的大小。

 

二、将PS中切好的图片直接拖拽到AI中

 

 

三、使用AI中的钢笔工具勾勒出SVG路径，注意要将前景色置透明，不然路径包围的区域将会被前景色填充。使用钢笔工具可适当多添加些锚点，以保证路径的精确。

 

 

 

四、笔画多的路径须要分开绘制，以上图中的“留”字为栗子

 

 

 

五、重复上面步骤，将全部添加描边效果的部位勾勒出来

 

 

六、在AI中将钢笔工具勾勒好的路径保存成 SVG 格式      File → Save As  选择SVG格式保存

 

 

 

 

 

 

 

 

 

七、打开刚刚保存好的 SVG 文件，就获得了 SVG 的路径代码

 

 

 

 

八、将得到到的路径代码按需稍加修改，其中描边的颜色和描边的宽度可在AI中绘制的时候设置好，也可在生成的代码中按需修改。

 

 

九、CSS3 SVG描边动画及实现原理，依赖两个属性stroke-dasharray和stroke-dashoffset
stroke-dasharray 表示虚线描边。可选值为：none, dasharray, inherit. 其中，none表示不是虚线；dasharray为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。能够是固定的长度值，也能够是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：percentage, length, inherit. 百分比值，长度值，继承。
原理就是将描边设置虚线，stroke-dasharray的数值与路径长度一致或者大于路径长度便可，需尝试肯定，路径长的话就给个大点的值，路径短就给个小点的值，效果满意便可。
而后再设置路径的偏移量stroke-dashoffset与stroke-dasharray的值同样的大便可，而后添加定义好的动画，将偏移量从样式中设置好的数值过渡到0，就实现了描边的效果。

 

/**********SVG描边动画**********/

@include keyframes(dash, webkit moz ms spec){
    to {
        stroke-dashoffset: 0;
    }
}
/**********SVG描边动画**********/

path,rect{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    @include animation(dash 1.5s ease-in-out 1);
    &.p-long{
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        @include animation(dash 1.5s ease-in-out 1);
    }
}

十、描边效果

 

 

十一、后续处理，经过 js 控制SVG效果执行完成以后将包裹着SVG的DIV隐藏起来，再将正常的设计稿样子显示出来。

这样就实现了先是看到SVG的路径动画，动画执行以后看到真实内容的效果了~