Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫
本文手把手教你圖片->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)站的支持!
相關(guān)文章
Android StickyListHeaders實現(xiàn)電話本列表效果
這篇文章主要為大家詳細介紹了Android StickyListHeaders實現(xiàn)電話本列表效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Android中AutoCompleteTextView與TextWatcher結(jié)合小實例
這篇文章主要為大家詳細介紹了Android中AutoCompleteTextView與TextWatcher結(jié)合的小實例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05Android實現(xiàn)帶有刪除按鈕的EditText示例代碼
本文給大家介紹一個很實用的小控件,就是在Android系統(tǒng)的輸入框右邊加入一個小圖標,點擊小圖標可以清除輸入框里面的內(nèi)容,IOS上面直接設(shè)置某個屬性就可以實現(xiàn)這一功能,但是Android原生EditText不具備此功能,所以要想實現(xiàn)這一功能我們需要重寫EditText。下面來看看吧。2016-12-12Android仿微信列表滑動刪除 如何實現(xiàn)滑動列表SwipeListView
這篇文章主要為大家詳細介紹了Android仿微信列表滑動刪除,如何實現(xiàn)滑動列表SwipeListView,感興趣的小伙伴們可以參考一下2016-08-08