本文手把手教你圖片->SVG->Path的姿勢.。

從此酷炫Path動畫，如此簡單。

效果先隨便上幾個圖，以后你找到的圖有多精彩，gif就有多精彩：

隨便搜了一個鉛筆畫的圖，丟進去

隨手復制的二維碼icon

來自大佬wing的鐵塔

前文回顧

這里簡單回顧一下前文，GIF如下圖：

PathAnimView接受的唯一數(shù)據(jù)源是Path（給我一個Path，還你一個動畫View）

所以內(nèi)置了幾種將別的資源->Path的方法：

• 直接傳string。（A-Z,0-9 “.” “- ” “） 

 //根據(jù)String 轉(zhuǎn)化成Path
 setSourcePath(PathParserUtils.getPathFromArrayFloatList(StoreHousePath.getPath("ZhangXuTong", 1.1f, 16)));

• 定義在R.array.xxx里   

 //動態(tài)設(shè)置 從StringArray里取
 storeView2.setSourcePath(PathParserUtils.getPathFromStringArray(this, R.array.storehouse, 3));

• 簡單的SVG(半成品)     

//SVG轉(zhuǎn)-》path
 //還在完善中，我從github上找了如下工具類，發(fā)現(xiàn)簡單的SVG可以轉(zhuǎn)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也不是很懂，現(xiàn)在經(jīng)過一段時間的學習和基友們的討論（wing神，白神，群友等），我才知道我從gayhub上找到的這個工具類，是可以將標準的SVG轉(zhuǎn)換為Android中的Path(android.graphics.Path)的。

之前的痛點

之前我轉(zhuǎn)換失敗的，所謂 復雜的SVG，其實是我直接利用AS生成的vector（我稱之a(chǎn)ndroid svg）。里面對標準SVG進行了一些語法的擴充，才導致我轉(zhuǎn)換的失敗。（例如擴充了 S，Q等標記）

例如我們利用AS的工具，直接生成一個Android機器人的icon的Vector，之前我以為這就是SVG數(shù)據(jù)了，實際上我發(fā)現(xiàn)這是對標準SVG進行了擴展，

生成的數(shù)據(jù)如下：

標紅處可以看到，1.5s, s并不在標準的SVG語法中，所以解析會出錯。

圖片->SVG->Path的正確姿勢

那么為什么我今天又敢出來寫（zhuang）博(b)客了呢，因為我已經(jīng)有了解決這個問題的方案。

好，讓我們想一下，實際開發(fā)中，如果要用Path動畫，我們的場景是什么？

嗯，看到一張想要她動的圖，或 UI妹子給了你一張，讓你自己動的圖。

步驟一：圖->SVG

利用vmde軟件,我們可以輕松完成將圖->SVG。（大佬wing提供的方案）

首先我們先get一張喜歡的圖，可以從Iconfont里取，下載方式直接不要選SVG，這里的SVG直接使用會有問題，原因不明.我們就選PNG下載即可。

然后打開vmde軟件

• 直接將剛才的PNG圖片拖入其中
• 點擊右上角的全自動
• 點擊完成
• 點擊另存，格式記得選擇*.svg

其實現(xiàn)在我們已經(jīng)可以用一些文本編輯工具直接打開SVG，并且復制其中的PathData,以String形式傳入PathAnimView即可。         

Path path = svgPathParser.parsePath(pathString);
  storeView3.setSourcePath(path);

嗯，方法其實就這么簡單，但是~有很多的圖，是有N段PathData的，也就是說復制起來極其麻煩，

而且如果要從中剔除一些不需要的Path，或者改變幾個Path的繪制順序，就更難篩選了。

步驟二：利用工具網(wǎng)站預覽Path

于是我就求白神給我做了一個工具頁面，它可以完成SVG的解析、預覽、并將每段Path分隔開，方便我們復制黏貼。

http://liuyouth.github.io/utils/svg2android/index.html

使用方式也相當簡單，直接拖動SVG的圖丟進去即可。

解析后的效果圖

可以看到，我們可以方便的選取每一段Path，如果我只需要最外面的齒輪，那我只對齒輪部分點擊select all即可。

也可以調(diào)整順序，例如我想先繪制外圈，就將外圈的Path放在前面復制進我們的app中。

這里再拿文首第一張妹子圖舉例：

經(jīng)過PNG->SVG->預覽的步驟后，如下：

vmde給我們生成了海量的path數(shù)據(jù)，我們只想要其中一部分有用的，

于是通過預覽&放大，我只復制了兩段Path，效果就如文首了。

關(guān)于這個網(wǎng)站，白神已經(jīng)承諾我，會盡快加上圖片預覽的放大和一鍵復制全部Path的功能，大家敬請期待。

手摸手實戰(zhàn)：支付寶支付成功動畫

其實支付寶支付成功動畫相當簡單，路徑 就是畫一個圓 + 一個勾.

路徑的獲取，可以：

• 利用本文介紹的圖片->SVG->Path 的方法。
• 也直接用Path的一些draw方法實現(xiàn)。

我們利用本文的辦法去實現(xiàn)：

1 拿到這張圖

2 PNG丟進vmde

3 SVG丟進工具網(wǎng)頁

4 根據(jù)預覽，依次復制一個圓 + 一個勾的String。       

 String success = "...PathString";

5 利用SvgPathParser工具類得到Path 

 Path path = svgPathParser.parsePath(success);

6 設(shè)置給PathAnimView.

 storeView3.setSourcePath(path);

效果圖：

總結(jié)

代碼傳送門：喜歡的話，隨手點個star。多謝

https://github.com/mcxtzhang/PathAnimView

現(xiàn)在我們已經(jīng)可以做到，I have a pic.I have a view. Oh~,Path(Anim)View.

步驟：

• 一張圖
• 丟進vmde
• 丟進SVG-Path預覽網(wǎng)站
• 復制需要的Path以String形式傳入PathAnimView
• 酷炫動畫

在提取出SVG中的Path數(shù)據(jù)后，我個人喜歡將比較長的Path，放進values目錄下一個新建文件paths.xml中，以以下形式存儲：  

<string name="xxx"> 復制過來的Path數(shù)據(jù)</string>

Java代碼中如下設(shè)置：   

 String xxx= getString(R.string.xxx);
 Path path = svgPathParser.parsePath(xxx);
 storeView.setSourcePath(path);

想了解更詳細的使用以及細節(jié)，請下載DEMO后查看。

看大神們都有QQ群，
向他們靠齊。
我也建了個QQ搞基交流群：
557266366 。

下文預告

最近略忙，項目電商模塊重構(gòu)，UI升級，于是我擼了一個購物車的控件：

項目中使用的效果

圖錄花了，我也不管了。。下次博文重新錄個圖吧，大家重點看購物車伸縮旋轉(zhuǎn)閃轉(zhuǎn)騰挪的動畫即可。

代碼已經(jīng)擼完，考慮到了View的回收復用，

并且可以看到在RecyclerView中使用，切換LayoutManager也是沒有問題的，

博文在梳理中，預計下周一輸出。

心急可先去gayhub查看代碼：

https://github.com/mcxtzhang/AnimShopButton

以上所述是小編給大家介紹的Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論