根据AI导出的SVG path制作SVG线条动画

前面文章SVG 线条动画根本入门知识学习到了根本知识，现在来给大家讲讲如何制作SVG 制作繁芜图形线条动画。

如果你有这样的一个gif，要用svg画出来，你能想到什么办法了？

上面这个 SVG 线条动画的路径 path ，如果自己手工一个点一个点定位调试画出来的话，估计你的累趴下（也不一定能搞定）。

下面我来见告大家一个大略的方法，准备好工具。

利用 PS 导出路径

导入图片

用魔术棒or套索工具,选择区域

右击-->建立事情路径-->容差2个像素吧（可以用不同大小的容差多试几次，直到得到一个自己满意的路径。
）。

好，这个时候，路径算是建立完成了，可以把图层的透明度设置为 0 ，就能清晰的看到路径长啥样：

好，到了 PS 中的末了一步，点击 文件-->导出-->路径到 illustrator ，看图，照着操作就好：

在 illustrator 中天生 SVG 文件

打开 AI ，打开刚刚用 PS 导出的 .ai 文件。

可能你看到的是一片空缺，别慌，利用ctrl+a全选，就能选中路径啦。

看到了吧，这上面有多少个点，太多，都不想数，以是手工画是不可能的啦。

OK，接下来便是调度画布大小，最好是路径左上角和画布左上角对齐，然后选中存储为 SVG 文件。

好，实在吧 AI 也没做什么，路径是利用 PS 天生的，为什么不直接用 PS 天生 .svg 文件呢？由于我用的版本 PS 还没支持直接存储为 SVG 格式。
然后实在也可以直接在 AI 上绘制路径，这个就看设计师或者你对哪个工具更熟习了。

把刚刚保存的 .svg 路径的文件用浏览器打开，右键查看网页源代码：

这里的path便是我们要的路径了

<div class=\"大众container\公众> <svg version=\"大众1.1\公众 id=\"大众图层_1\"大众 xmlns=\"大众http://www.w3.org/2000/svg\"大众 xmlns:xlink=\"大众http://www.w3.org/1999/xlink\公众 x=\"大众0px\"大众 y=\"大众0px\公众 viewBox=\公众0 0 1600 2844\公众 style=\"大众enable-background:new 0 0 1600 2844;\"大众 xml:space=\公众preserve\"大众> <path class=\"大众yy\"大众 fill-rule=\"大众evenodd\公众 clip-rule=\"大众evenodd\"大众 fill=\公众none\"大众 d=\"大众M1170.7,1628.5c1.1,8,8.6,13,6.1,20.8c-1.8,4.2-3.6,5.1-7.8,6.9c-15.9-4.1-20.4-27.8-27.7-40.7 c-26.3-2.9-60-31.8-84.9-28.6c0,0.3,0,0.6,0,0.9c24.1,50.6,33.3,107,45,172.3c3.8,21.2,5.3,61.9-8.7,71c-11.6,7.6-37.9,0.9-55.4,0.9 c-46,0-93-0.7-140.3-0.9c-1.4,13.7,1.5,51,6.9,62.3c13-0.4,20.4-0.4,31.2,1.7c6.6,15.6,6.2,22.7-4.3,34.6 c-11.5,0.9-23.1,1.7-34.6,2.6c-11.7,1.2-23.8-9.6-21.6-21.6c1.1-5.8,7.1-9.6,8.7-13.9c2.2-6.2-6.6-61.8-8.7-64.1 c-10-4.7-28.4-0.9-41.6-0.9c-24.4,0-104.2-3.9-120.4,3.5c0.3,23.4,0.6,46.8,0.9,70.1c10.4-0.3,30.5-3.9,36.4,1.7 c9.6,5.1,9.1,16.7,6.1,27.7c-15,8.7-61.1,17.7-69.3-4.3c-3.6-13.9,5.6-16.6,7.8-25.1c-0.6-23.1-1.2-46.2-1.7-69.3 c-38.7-4.5-148.7,16.8-168.9-6.9c-12.4-14.6-1.5-48.6-0.9-67.5c-7.5-1.4-15-2.9-22.5-4.3c-4.6,2-9.2,4-13.9,6.1 c-19.1,5.4-36.4-3.1-45.9-10.4c-0.3-2.9-0.6-5.8-0.9-8.7c0.9-1.7,1.7-3.5,2.6-5.2c13.7-1.8,19.8,8.3,36.4,5.2 c0.3-0.6,0.6-1.2,0.9-1.7c-8.1-23.5-16.7-29.3,4.3-48.5c31.2-1.1,34.4,20.4,30.3,46.8c0.6,0,1.2,0,1.7,0c3.8,0,7.5,0,11.3,0 c1.2-30.6,15.9-74.8,26-100.4c2.3-8.7,4.6-17.3,6.9-26c5.5-12.1,14.2-26.5,15.6-41.6c-7.1,0.6-74.6,37.4-77.9,41.6 c-9.8,12-3.4,47.4-21.6,50.2c-2.6-0.9-5.2-1.7-7.8-2.6c-2.9-10.3,4.4-20.8,0.9-29.4c-3.2,2.3-6.4,4.6-9.5,6.9c-5.2-1.7-7-3-10.4-6.1 c0.3-2.9,0.6-5.8,0.9-8.7c3.1-4.9,7.8-5.7,9.5-12.1c-14.7-0.5-35.4-0.8-32-17.3c1.7-1.7,3.5-3.5,5.2-5.2c19,2.3,38.1,4.6,57.2,6.9 c24.3-10,47.3-29.5,71-41.6c10.4-4.9,20.8-9.8,31.2-14.7c4.9-10.7,9.8-21.4,14.7-32c6.3-10.4,12.7-20.8,19.1-31.2 c-13.3-15.1-32-26.2-43.3-43.3c-25.3-38.1-47.3-102-32-166.3c1.4-9.2,2.9-18.5,4.3-27.7c7.2-15.8,13.5-43.8,23.4-57.2 c10.4-14,31.3-38.2,37.2-53.7c-38.9-23-91-107.2-22.5-138.6c33.4-15.3,77.6,21.5,91.8,36.4c5.1,5.4,13,23.8,20.8,22.5 c5.2-1.4,11.1-5.5,13.9-9.5c-21.1-32.6-53.3-102-5.2-132.5c38.2-24.2,83.5,14.5,93.5,39.8c3.5,15.3,6.9,30.6,10.4,45.9 c0.6,0.3,1.2,0.6,1.7,0.9c13.9-4,27.7-8.1,41.6-12.1c21.1-3.5,42.1-6.9,63.2-10.4c22.9-4.9,60.8,7.1,71.9,5.2 c17.3-5.8,28-21.5,55.4-19.9c58.4,3.3,134.2,90.3,102.2,158.5c-17.8,37.8-94.4,97.4-133.4,116c1.1,9.3,6.1,12,9.5,18.2 c7.3,13,11.3,29.9,14.7,45.9c13.1,61-11.7,116.9-37.2,148.9c-7.5,7.8-15,15.6-22.5,23.4c12.8,21.6,31.5,41.2,45,63.2 c4.6,9.2,9.2,18.5,13.9,27.7c9.3,6.8,22.5,4.7,32.9,10.4c18.4,10.1,46.1,22.5,66.7,27.7c9,2.3,42-9.4,58.9-9.5 c0.9,1.4,1.7,2.9,2.6,4.3c2.6,4.8,0.8,9-1.7,13c-5.5,1.4-11,2.9-16.5,4.3c0.3,1.4,0.6,2.9,0.9,4.3c5.9,1.3,7.5,3.1,11.3,6.1 c0.3,1.7,0.6,3.5,0.9,5.2C1194.2,1640.6,1183.7,1630.4,1170.7,1628.5z\公众/> </svg> </div>利用动画

.container { width: 400px; margin: 20px auto; } .yy { stroke-width: 5; stroke: #f987ae; animation: lineMove 13s ease-out infinite; } @keyframes lineMove { 0% { stroke-dasharray: 0, 4891; } 50% { stroke-dasharray: 4891, 4891; fill: rgba(0, 0, 0, 0); opacity: 1; } 100% { stroke-dasharray: 4891, 4891; fill: rgba(249, 135, 174, 1); opacity: 0; } }

这里的stroke-dasharray长度，可以通过js来获取

var obj = document.querySelector(\公众path\公众); var length = obj.getTotalLength(); console.log(length); // 4890.61669921875

是不是很大略了？赶紧自己试试吧。

喜好

源码地址和源文件下载请点击下方“理解更多”