概述
新年第一篇技術文章哈，大家新年快樂，先來個簡單點的，主要介紹工具的使用，預預熱，下週一奉上一個騷氣的購物車動畫按鈕，敬請期待。
在前文 給我一個Path，還你一個酷炫動畫 中，我詳細的闡述瞭如何擼出一個酷炫的Path動畫View，我們的口號是：
I have a path.I have a view. Oh~,Path(Anim)View.
也就是說，只要有了Path，剩下的就是絢麗的動畫。
但是，這個Path要怎麼獲取呢，這是一個重點&痛點。
之前我也給出了三種解決方案，可以滿足一些場景，但是SVG->Path的方案，在我心中仍是未完品。
這就相當於我給大家看了一晚好喝的雞湯，Path動畫是很酷，然而我給的勺子還不夠好，有些喝的不盡興。
所以本文的目標是:I have a pic.I have a view. Oh~,Path(Anim)View.
考慮到實際SVG/美工給的圖->Path也是一種很大的資料來源來源。
於是我經過一段時間的攪基討論，有了此文。
本文會先簡單回顧上文，然後手把手教你圖片->SVG->Path的姿勢.。
從此酷炫Path動畫，如此簡單。
效果先隨便上幾個圖，以後你找到的圖有多精彩，gif就有多精彩：
隨便搜了一個鉛筆畫的圖，丟進去
隨手複製的二維碼icon
來自大佬wing的鐵塔
轉載請標明出處：
gold.xitu.io/post/586c63…
本文出自:【張旭童的稀土掘金】(gold.xitu.io/user/56de21…)
程式碼傳送門：喜歡的話，隨手點個star。多謝
github.com/mcxtzhang/P…
前文回顧
這裡簡單回顧一下前文，GIF如下圖：
PathAnimView接受的唯一資料來源是Path（給我一個Path，還你一個動畫View）
所以內建了幾種將別的資源->Path的方法：
- 直接傳string。（A-Z,0-9 "." "- " "）
//根據String 轉化成Path
setSourcePath(PathParserUtils.getPathFromArrayFloatList(StoreHousePath.getPath("ZhangXuTong", 1.1f, 16)));複製程式碼- 定義在R.array.xxx裡
//動態設定 從StringArray裡取 storeView2.setSourcePath(PathParserUtils.getPathFromStringArray(this, R.array.storehouse, 3));複製程式碼 - 簡單的SVG(半成品)
//SVG轉-》path //還在完善中，我從github上找了如下工具類，發現簡單的SVG可以轉path，複雜點的 就亂了 /* SvgPathParser svgPathParser = new SvgPathParser(); try { Path path = svgPathParser.parsePath("M1,1 L1,50 L50,50 L50,50 L50,1 Z"); storeView3.setSourcePath(path); } catch (ParseException e) { e.printStackTrace(); }*/複製程式碼
當時我稱之為簡單的SVG ，因為當時我對SVG也不是很懂，現在經過一段時間的學習和基友們的討論（wing神，白神，群友等），我才知道我從gayhub上找到的這個工具類，是可以將標準的SVG轉換為Android中的Path(android.graphics.Path)的。
之前的痛點
之前我轉換失敗的，所謂 複雜的SVG，其實是我直接利用AS生成的vector（我稱之android svg）。裡面對標準SVG進行了一些語法的擴充，才導致我轉換的失敗。（例如擴充了 S，Q等標記）
例如我們利用AS的工具，直接生成一個Android機器人的icon的Vector，之前我以為這就是SVG資料了，實際上我發現這是對標準SVG進行了擴充套件，
生成的資料如下：
標紅處可以看到，1.5s, s並不在標準的SVG語法中，所以解析會出錯。
圖片->SVG->Path的正確姿勢
那麼為什麼我今天又敢出來寫（zhuang）博(b)客了呢，因為我已經有了解決這個問題的方案。
好，讓我們想一下，實際開發中，如果要用Path動畫，我們的場景是什麼？
嗯，看到一張想要她動的圖，或 UI妹子給了你一張，讓你自己動的圖。
步驟一：圖->SVG
利用vmde軟體,我們可以輕鬆完成將圖->SVG。（大佬wing提供的方案）
首先我們先get一張喜歡的圖，可以從Iconfont裡取，下載方式直接不要選SVG，這裡的SVG直接使用會有問題，原因不明.我們就選PNG下載即可。
然後開啟vmde軟體
- 直接將剛才的PNG圖片拖入其中
- 點選右上角的全自動
- 點選完成
- 點選另存，格式記得選擇*.svg
其實現在我們已經可以用一些文字編輯工具直接開啟SVG，並且複製其中的PathData,以String形式傳入PathAnimView即可。
Path path = svgPathParser.parsePath(pathString);
storeView3.setSourcePath(path);複製程式碼嗯，方法其實就這麼簡單，但是~有很多的圖，是有N段PathData的，也就是說複製起來極其麻煩，
而且如果要從中剔除一些不需要的Path，或者改變幾個Path的繪製順序，就更難篩選了。
步驟二：利用工具網站預覽Path
於是我就求白神給我做了一個工具頁面，它可以完成SVG的解析、預覽、並將每段Path分隔開，方便我們複製黏貼。
liuyouth.github.io/utils/svg2a…
使用方式也相當簡單，直接拖動SVG的圖丟進去即可。
可以看到，我們可以方便的選取每一段Path，如果我只需要最外面的齒輪，那我只對齒輪部分點選select all即可。
也可以調整順序，例如我想先繪製外圈，就將外圈的Path放在前面複製進我們的app中。
這裡再拿文首第一張妹子圖舉例：
經過PNG->SVG->預覽的步驟後，如下：
vmde給我們生成了海量的path資料，我們只想要其中一部分有用的，
於是通過預覽&放大，我只複製了兩段Path，效果就如文首了。
關於這個網站，白神已經承諾我，會盡快加上圖片預覽的放大和一鍵複製全部Path的功能，大家敬請期待。
手摸手實戰：支付寶支付成功動畫
其實支付寶支付成功動畫相當簡單，路徑 就是畫一個圓 + 一個勾.
路徑的獲取，可以：
- 利用本文介紹的圖片->SVG->Path 的方法。
- 也直接用
Path的一些draw方法實現。
我們利用本文的辦法去實現：
1 拿到這張圖
2 PNG丟進vmde
3 SVG丟進工具網頁
4 根據預覽，依次複製一個圓 + 一個勾的String。
String success = "...PathString";複製程式碼5 利用SvgPathParser工具類得到Path
Path path = svgPathParser.parsePath(success);複製程式碼6 設定給PathAnimView.
storeView3.setSourcePath(path);複製程式碼效果圖：
總結
程式碼傳送門：喜歡的話，隨手點個star。多謝
github.com/mcxtzhang/P…
現在我們已經可以做到，I have a pic.I have a view. Oh~,Path(Anim)View.
步驟：
- 一張圖
- 丟進vmde
- 丟進SVG-Path預覽網站
- 複製需要的Path以String形式傳入
PathAnimView - 酷炫動畫
在提取出SVG中的Path資料後，我個人喜歡將比較長的Path，放進values目錄下一個新建檔案paths.xml中，以以下形式儲存：
<string name="xxx"> 複製過來的Path資料</string>複製程式碼java程式碼中如下設定：
String xxx= getString(R.string.xxx);
Path path = svgPathParser.parsePath(xxx);
storeView.setSourcePath(path);複製程式碼想了解更詳細的使用以及細節，請下載DEMO後檢視。
看大神們都有QQ群，
向他們靠齊。
我也建了個QQ搞基交流群：
557266366 。
下文預告
最近略忙，專案電商模組重構，UI升級，於是我擼了一個購物車的控制元件：
圖錄花了，我也不管了。。下次博文重新錄個圖吧，大家重點看購物車伸縮旋轉閃轉騰挪的動畫即可。
程式碼已經擼完，考慮到了View的回收複用，
並且可以看到在RecyclerView中使用，切換LayoutManager也是沒有問題的，
博文在梳理中，預計下週一輸出。
心急可先去gayhub檢視程式碼：
github.com/mcxtzhang/A…
鳴謝
白神的個人網站，很666的一個全棧
wing,郵電三精-大精，又稱靜靜，奶zi靜
轉載請標明出處：
gold.xitu.io/post/586c63…
本文出自:【張旭童的稀土掘金】(gold.xitu.io/user/56de21…)
程式碼傳送門：喜歡的話，隨手點個star。多謝
github.com/mcxtzhang/P…