本文由張旭童投稿。
張旭童的部落格位址：
http://blog.csdn.net/zxt0601/
作者昵稱為注釋張，對各類炫酷效果有非常深的研究，尤其是結合RecyclerView,本篇文章延續上篇：
【Android】 給我一個Path，還你一個酷炫動畫
繼續為大家帶來炫酷的Path動畫，也算是實作了作者的心願~
1概述
新年第一篇技術文章哈，大家新年快樂，先來個簡單點的，主要介紹工具的使用，預預熱，下周一奉上一個騷氣的購物車動畫按鈕，敬請期待。
在前文 給我一個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的鐵塔
2前文回顧
這裡簡單回顧一下前文，GIF如下圖：
PathAnimView接受的唯一資料源是Path（給我一個Path，還你一個動畫View）
是以内置了幾種将别的資源->Path的方法：
直接傳string。（A-Z,0-9 “.” “- ” “）
定義在R.array.xxx裡
簡單的SVG(半成品)
當時我稱之為簡單的SVG ，因為當時我對SVG也不是很懂，現在經過一段時間的學習和基友們的讨論（wing神，白神，群友等），我才知道我從gayhub上找到的這個工具類，是可以将标準的SVG轉換為Android中的Path(android.graphics.Path)的。
2之前的痛點
之前我轉換失敗的，所謂 複雜的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即可。
嗯，方法其實就這麼簡單，但是~有很多的圖，是有N段PathData的，也就是說複制起來極其麻煩，
而且如果要從中剔除一些不需要的Path，或者改變幾個Path的繪制順序，就更難篩選了。
步驟二：利用工具網站預覽Path
于是我就求白神給我做了一個工具頁面，它可以完成SVG的解析、預覽、并将每段Path分隔開，友善我們複制黏貼。
http://liuyouth.github.io/utils/svg2android/index.html
使用方式也相當簡單，直接拖動SVG的圖丢進去即可。
可以看到，我們可以友善的選取每一段Path，如果我隻需要最外面的齒輪，那我隻對齒輪部分點選select all即可。
也可以調整順序，例如我想先繪制外圈，就将外圈的Path放在前面複制進我們的app中。
這裡再拿文首第一張妹子圖舉例：
經過PNG->SVG->預覽的步驟後，如下：
vmde給我們生成了海量的path資料，我們隻想要其中一部分有用的，
于是通過預覽&放大，我隻複制了兩段Path，效果就如文首了。
關于這個網站，白神已經承諾我，會盡快加上圖檔預覽的放大和一鍵複制全部Path的功能，大家敬請期待。
3手摸手實戰：支付寶支付成功動畫
其實支付寶支付成功動畫相當簡單，路徑 就是畫一個圓 + 一個勾.
路徑的擷取，可以：
利用本文介紹的圖檔->SVG->Path 的方法。
也直接用Path的一些draw方法實作。
我們利用本文的辦法去實作：
1 拿到這張圖
2 PNG丢進vmde
3 SVG丢進工具網頁
4 根據預覽，依次複制一個圓 + 一個勾的String。
5 利用SvgPathParser工具類得到Path
6 設定給PathAnimView.
效果圖：
4總結
代碼傳送門：喜歡的話，随手點個star。多謝
https://github.com/mcxtzhang/PathAnimView
現在我們已經可以做到，I have a pic.I have a view. Oh~,Path(Anim)View.
步驟：
一張圖
丢進vmde
丢進SVG-Path預覽網站（http://liuyouth.github.io/utils/svg2android/index.html）
複制需要的Path以String形式傳入PathAnimView
酷炫動畫
在提取出SVG中的Path資料後，我個人喜歡将比較長的Path，放進values目錄下一個建立檔案paths.xml中，以下形式存儲：
Java代碼中如下設定：
想了解更詳細的使用以及細節，請下載下傳DEMO後檢視。
如果你有好的文章想和大家分享歡迎投稿，直接向我投遞文章連結即可。