自制SVG矢量动画，摆脱UI的第一步

在某技术博客这里看到了一个炫酷的svg效果。

2017-08-17_18-44-30.gif

文章的开头是这样的，超带感的BatMan Logo有没有，略激动。
然后往下看。

虽然我知道这两个原理应该是一样的，
但我就是冲着蝙蝠Logo来的好吗？？？

默默Copy走下面F和Twitter的Path。百度搜索 batman Logo svg。。。无果。。。

好了，既然没有那只好自己动手了。直接截图Logo，导入PS。

image.png

so，这是一篇二流程序员和不入流UI的SVG制作教程。

毕竟动手能力真的强

纯色图案我们直接通过快速选择获取轮廓选取。

image.png

右键建立工作路径，容差默认2，得到矢量路径。

选择文件 > 导出 > 路径到AI，保存路径文件

使用AI打开保存的路径文件，打开时选择图稿定界框，这样画板会自适应我们的路径文件。注意路径要右键选中才能看到

image.png

使用选择工具在菜单栏给路径描边，等比线段1像素即可

image.png

选择文件另存为，保存为svg格式

image.png

同样操作另外一个截图，得到了两个SVG源文件。

image.png

有了两个不同路径，那么就可以尝试制作AnimatedVectorDrawable来实现动画了。这里用一个插件直接把SVG导入AndroidStudio，静态展示无误。

image.png image.png

然后就来写个AnimatedDrawable了，
具体可以看这里 Android矢量动画实践

然后....毫不客气的报错了

这个是坐标不匹配造成的，没关系，我们有修坐标神器 Vectalign

输入前后路径文件

 java -jar vectalign.jar  --start 1.svg --end 2.svg

image.png

得到修改后的坐标结果，填入我们的XMl文件。
然后准备看完美的效果了哈哈哈

貌似，好像，有些不对..怎么和预期的效果有点差距...
看起来是由于画板大小不匹配造成的，导致路径没有按照预期的形式过渡

解决办法是，手动匹配坐标点
或者重新切一套匹配的SVG？

如果有UI大神看见了...求教如何制作路径匹配的SVG....

今天的炫酷SVG教程就到此为止啦~

先发出来了，待我回头改好了图再来编辑文章...