上一篇我们初步实现了一些使用基本图形就可以完成的线条动画：【Web动画】SVG线条动画介绍【1】当然，一切都在Developingin熵增和焓减的方向，复杂的线一定比有序的线多。因此，在很多情况下，我们无法手动绘制一些非常复杂的动画线条。这个时候就需要用到我们的前端帮手PS和AI了：嗯，假设我们要制作一个像下面GIF这样的加载图片：上面SVG线条动画的path路径，如果手动逐点绘制，定位调试，嘿嘿，可以试试。用PS导出路径，估计是手工画出来的，丢了大半条命。好了，轮到工具了，看看我们的原图在PS下是什么样子的（支持透明通道的PNG和GIF效果更好）：OK，选择选框工具，按CTRL选中图层，然后选择创建工作路径：此时会弹出设置公差大小的选项。您可以使用不同的公差大小尝试多次，直到获得满意的路径。公差是多少？可以理解为一种精度。选择颜色时设置的选择范围。公差越大，选择范围越大。该值介于0-255之间。好了，至此，路径就建立好了。可以把图层的透明度设置为0，就可以清楚的看到路径是什么样子的：嗯，路径还挺帅的。好了，PS最后一步了，点击文件选项，导出路径到illustrator，看图，按照操作：在illustrator中生成一个SVG文件，打开AI，用打开刚刚导出的*.ai文件附言。没有人工智能？作为一个前端，我连AI都没有安装(￣△￣;)，其实我只是因为SVG才入门的，我们看下一篇。可能你看到的是一片空白，不要惊慌，用选择工具选择一个矩形，就可以选择路径了。如果你是PS钢笔工具的小能手，可以继续修改路径，直到你满意为止。OK，接下来就是调整画布的大小了。路径的左上角最好与画布的左上角对齐，然后选择另存为SVG文件。嗯，其实AI什么都不做，路径是用PS生成的，为什么不直接用PS生成*.svg文件呢？因为我用的PS版本不支持直接存为SVG格式。其实你也可以直接在AI上画路径，就看设计师或者你对哪个工具比较熟悉了。获取SVGOK的路径。最后用浏览器打开刚才保存的*.svg路径的文件。空白是正常的。右键查看网页源代码：大功告成。这里，路径就是我们需要的路径！OK，把我们想要的整个拿出来，利用上一篇文章中的线条动画知识，给它一个简单的动画效果：CodePenDemo--SVGPathAnimation[2]利用这个技巧，我们可以生成各种复杂的SVG动画：使用javascript计算路径长度还有一个问题。线条动画需要知道整个路径的长度。对于简单的线条，我们还可以用加减法计算出整个图形的长度。那么如何计算复杂路径的长度呢？它可以用一个简单的js来完成：;//377.0433嗯，有了复杂图形的一些路径，我们可以创建很多很酷的SVG动画效果。洒花。最后，本文到此结束，制作复杂SVG路径的简单技巧，希望对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS[3]，持续更新中，欢迎关注单击星号订阅收藏夹。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。参考文献[1][WebAnimation]SVGLineAnimation介绍：http://www.cnblogs.com/coco1s/p/6225973.html[2]CodePenDemo--SVGPathAnimation：http://codepen.io/Chokcoco/pen/GNbwYV/[3]Github——iCSS：https://github.com/chokcoco/iCSS
