Adobe Illustrator导出只有path标签的svg用来配合animejs制作动画 | 您所在的位置:网站首页 › 图片导入ai生成路径 › 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标签的位置就可以做到顺序执行了。 调整顺序播放 最终效果 |
CopyRight 2018-2019 实验室设备网 版权所有 |