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

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

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

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

從此酷炫Path動(dòng)畫(huà)，如此簡(jiǎn)單。

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

隨便搜了一個(gè)鉛筆畫(huà)的圖，丟進(jìn)去

隨手復(fù)制的二維碼icon

隨手復(fù)制的二維碼icon

來(lái)自大佬wing的鐵塔

前文回顧

這里簡(jiǎn)單回顧一下前文，GIF如下圖：

上文效果圖

PathAnimView接受的唯一數(shù)據(jù)源是Path（給我一個(gè)Path，還你一個(gè)動(dòng)畫(huà)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里   
 //動(dòng)態(tài)設(shè)置 從StringArray里取
 storeView2.setSourcePath(PathParserUtils.getPathFromStringArray(this, R.array.storehouse, 3));
  • 簡(jiǎn)單的SVG(半成品)     
//SVG轉(zhuǎn)-》path
 //還在完善中，我從github上找了如下工具類，發(fā)現(xiàn)簡(jiǎn)單的SVG可以轉(zhuǎn)path，復(fù)雜點(diǎn)的 就亂了
/* 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();
 }*/

當(dāng)時(shí)我稱之為簡(jiǎn)單的SVG ，因?yàn)楫?dāng)時(shí)我對(duì)SVG也不是很懂，現(xiàn)在經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和基友們的討論（wing神，白神，群友等），我才知道我從gayhub上找到的這個(gè)工具類，是可以將標(biāo)準(zhǔn)的SVG轉(zhuǎn)換為Android中的Path(android.graphics.Path)的。

之前的痛點(diǎn)

之前我轉(zhuǎn)換失敗的，所謂 復(fù)雜的SVG，其實(shí)是我直接利用AS生成的vector（我稱之a(chǎn)ndroid svg）。里面對(duì)標(biāo)準(zhǔn)SVG進(jìn)行了一些語(yǔ)法的擴(kuò)充，才導(dǎo)致我轉(zhuǎn)換的失敗。（例如擴(kuò)充了 S，Q等標(biāo)記）

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

 

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

 

標(biāo)紅處可以看到，1.5s, s并不在標(biāo)準(zhǔn)的SVG語(yǔ)法中，所以解析會(huì)出錯(cuò)。

圖片->SVG->Path的正確姿勢(shì)

那么為什么我今天又敢出來(lái)寫(xiě)（zhuang）博(b)客了呢，因?yàn)槲乙呀?jīng)有了解決這個(gè)問(wèn)題的方案。

好，讓我們想一下，實(shí)際開(kāi)發(fā)中，如果要用Path動(dòng)畫(huà)，我們的場(chǎng)景是什么？

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

步驟一：圖->SVG

 

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

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

 

然后打開(kāi)vmde軟件

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

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

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

嗯，方法其實(shí)就這么簡(jiǎn)單，但是~有很多的圖，是有N段PathData的，也就是說(shuō)復(fù)制起來(lái)極其麻煩，

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

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

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

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

使用方式也相當(dāng)簡(jiǎn)單，直接拖動(dòng)SVG的圖丟進(jìn)去即可。

解析后的效果圖 

解析后的效果圖

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

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

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

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

 

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

于是通過(guò)預(yù)覽&放大，我只復(fù)制了兩段Path，效果就如文首了。

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

手摸手實(shí)戰(zhàn)：支付寶支付成功動(dòng)畫(huà)

其實(shí)支付寶支付成功動(dòng)畫(huà)相當(dāng)簡(jiǎn)單，路徑 就是畫(huà)一個(gè)圓 + 一個(gè)勾.

路徑的獲取，可以：

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

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

1 拿到這張圖

 

2 PNG丟進(jìn)vmde

3 SVG丟進(jìn)工具網(wǎng)頁(yè)

 

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

 String success = "...PathString";

5 利用SvgPathParser工具類得到Path 

 Path path = svgPathParser.parsePath(success);

6 設(shè)置給PathAnimView.

 storeView3.setSourcePath(path);

效果圖：

總結(jié)

代碼傳送門(mén)：喜歡的話，隨手點(diǎn)個(gè)star。多謝

https://github.com/mcxtzhang/PathAnimView

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

步驟：

  • 一張圖
  • 丟進(jìn)vmde
  • 丟進(jìn)SVG-Path預(yù)覽網(wǎng)站
  • 復(fù)制需要的Path以String形式傳入PathAnimView
  • 酷炫動(dòng)畫(huà)

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

<string name="xxx"> 復(fù)制過(guò)來(lái)的Path數(shù)據(jù)</string>

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

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

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

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

下文預(yù)告

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

項(xiàng)目中使用的效果 

項(xiàng)目中使用的效果

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

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

并且可以看到在RecyclerView中使用，切換LayoutManager也是沒(méi)有問(wèn)題的，

博文在梳理中，預(yù)計(jì)下周一輸出。

心急可先去gayhub查看代碼：

https://github.com/mcxtzhang/AnimShopButton

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

相關(guān)文章

最新評(píng)論