欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫

 更新時間:2017年01月09日 09:42:17   作者:張旭童  
這篇文章主要介紹了Android自定義View實現(xiàn)支付寶支付成功-極速get花式Path炫酷動畫的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下

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

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

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

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

隨手復制的二維碼icon

隨手復制的二維碼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)文章

最新評論