在某技术博客这里看到了一个炫酷的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教程就到此为止啦~
先发出来了，待我回头改好了图再来编辑文章...
网友评论