【註釋張豪華版 Path酷炫動畫】極速get花式Path （支付寶支付成功動畫）

概述

新年第一篇技術文章哈，你們新年快樂，先來個簡單點的，主要介紹工具的使用，預預熱，下週一奉上一個騷氣的購物車動畫按鈕，敬請期待。

在前文 給我一個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

隨手複製的二維碼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…