Adobe Illustrator导出只有path标签的svg用来配合animejs制作动画

上一篇文讲过了如何使用Adobe IIIustrator来生成前端html使用的svg标签文件。

但是如果配合animejs使用来做动画,有些不尽人意,直接上案例来说明遇到的情况。


首先拿到了一个UI提供的ai文件,无脑的导出一下子。


配上animejs标签之后,发现里面还有除了path标签之外的polygon标签。

这就导致了,在动画描线的过程中,只会描path的线,不会描polygon。(使用css不会出现这种问题的

所以我大胆尝试了以下的写法。干脆动画都不动了。


错误写法


以上的例子,可能不太贴切,也有别的解决方案,总之想表达的意思就是,想要导出只有path标签的svg文件。

我们在AI源文件中发现,之所以会有polygon标签,是因为有一些复杂图形可以由简单图形拼接而成。所以才没有生成路径。


解决方案:

按住shift手动把复杂图形的每一小块选中。右击,建立复合路径,这样这几块导出svg的时候就是一个path标签了,这样做的好处还可以大大的减少代码量。

至于单个的图形,如果没有生成path标签,也可以右击—>建立复合路径  来将它“路径化”



方法



复合路径之前
复合路径之后


一个“复合路径”操作再导出svg,代码直接少了20行。


来看看最终的path路径描线效果吧。至于使用animejs,偏旁部首的笔画动画顺序,完全取决于标签的先后顺序。调整path标签的位置就可以做到顺序执行了。


调整顺序播放


最终效果

你可能感兴趣的:(Adobe Illustrator导出只有path标签的svg用来配合animejs制作动画)