在某技術(shù)博客這里看到了一個炫酷的svg效果。
文章的開頭是這樣的，超帶感的BatMan Logo有沒有，略激動。
然后往下看。
雖然我知道這兩個原理應(yīng)該是一樣的，
但我就是沖著蝙蝠Logo來的好嗎？？？
默默Copy走下面F和Twitter的Path。百度搜索 batman Logo svg。。。無果。。。
好了，既然沒有那只好自己動手了。直接截圖Logo，導(dǎo)入PS。
so，這是一篇二流程序員和不入流UI的SVG制作教程。
畢竟動手能力真的強
純色圖案我們直接通過快速選擇獲取輪廓選取。
右鍵建立工作路徑，容差默認2，得到矢量路徑。
選擇文件 > 導(dǎo)出 > 路徑到AI，保存路徑文件
使用AI打開保存的路徑文件，打開時選擇圖稿定界框，這樣畫板會自適應(yīng)我們的路徑文件。注意路徑要右鍵選中才能看到
使用選擇工具在菜單欄給路徑描邊，等比線段1像素即可
選擇文件另存為，保存為svg格式
同樣操作另外一個截圖，得到了兩個SVG源文件。
有了兩個不同路徑，那么就可以嘗試制作AnimatedVectorDrawable來實現(xiàn)動畫了。這里用一個插件直接把SVG導(dǎo)入AndroidStudio，靜態(tài)展示無誤。
然后就來寫個AnimatedDrawable了，
具體可以看這里 Android矢量動畫實踐
然后....毫不客氣的報錯了
這個是坐標(biāo)不匹配造成的，沒關(guān)系，我們有修坐標(biāo)神器 Vectalign
輸入前后路徑文件
java -jar vectalign.jar --start 1.svg --end 2.svg
得到修改后的坐標(biāo)結(jié)果，填入我們的XMl文件。
然后準(zhǔn)備看完美的效果了哈哈哈
貌似，好像，有些不對..怎么和預(yù)期的效果有點差距...
看起來是由于畫板大小不匹配造成的，導(dǎo)致路徑?jīng)]有按照預(yù)期的形式過渡
解決辦法是，手動匹配坐標(biāo)點
或者重新切一套匹配的SVG？
如果有UI大神看見了...求教如何制作路徑匹配的SVG....
今天的炫酷SVG教程就到此為止啦~
先發(fā)出來了，待我回頭改好了圖再來編輯文章...
