Android使用Path仿支付寶支付成功失敗動畫

2021-09-11 11:56:02 字數 3866 閱讀 2424

首先我們來分解一下這個動作,首先是一段progressdialog,可以看做是在請求資料等待過程,然後成功之後顯示成功的動畫,失敗之後顯示失敗的動畫,那麼這裡涉及到三個狀態,載入中、載入成功和載入失敗,這裡我們使用列舉來實現這三種狀態。首先呢,我們先來實現這個等待的進度條:
1、畫乙個圓,確切的來說是畫一段圓弧,然後旋轉畫布,在此過程中不斷修改圓弧的大小,造成乙個這樣動態的假象:

@override

protected void ondraw(canvas canvas)

if (sweepangle >= 300 || startangle > minangle)

}if (startangle > minangle + 300)

canvas.rotate(curangle += 4, progressradius, progressradius); //旋轉的弧長為4

canvas.drawarc(new rectf(0, 0, progressradius * 2, progressradius * 2), startangle, sweepangle, false, mpaint);

invalidate();

}}複製**

/**

* preconcat the current matrix with the specified rotation.

* * @param degrees the amount to rotate, in degrees

* @param px the x-coord for the pivot point (unchanged by the rotation)

* @param py the y-coord for the pivot point (unchanged by the rotation)

*/public final void rotate(float degrees, float px, float py)

複製**

這個方法主要是將畫布進行旋轉,我們可以看到,先是將畫布平移到某個點,然後再旋轉某個角度,最後再平移回去,這樣做的目的是為了讓需要旋轉的view進行中心對稱旋轉,所以後面傳的px,py值需要是view寬高的一半,不信的話你可以去做個實驗;說了這麼多我們直接來看一下效果:

//追蹤path的座標

private pathmeasure mpathmeasure;

//畫圓的path

private path mpathcircle;

//擷取pathmeasure中的path

private path mpathcircledst;

mpaint.setcolor(loadsuccesscolor);

mpathcircle.addcircle(getwidth() / 2, getwidth() / 2, progressradius, path.direction.cw);

mpathmeasure.setpath(mpathcircle, false);

mpathmeasure.getsegment(0, circlevalue * mpathmeasure.getlength(), mpathcircledst, true);

canvas.drawpath(mpathcircledst, mpaint);

複製**

path的常用方法有,add一條路徑(任意形狀,任意線條),這裡我們在path中新增了乙個圓的路徑,具體path常見的用法如下表所示:

path的常見方法

方法含義

moveto()

該方法移動後續操作的起點座標

lineto()

該方法是連線起始點與某一點(傳的引數)形成一條線

setlastpath()

該方法是設定path最後的座標

close()

該方法是將起點座標與終點座標連線起來形成乙個閉合的圖形(如果始終點左邊能連線的話)

addrect()

該方法是繪製乙個巨型

addroundrect()

該方法是繪製乙個圓角矩形

addoval()

該方法是繪製乙個橢圓

arcto()

該方法是繪製一段圓弧

addarc()

該方法是繪製一段圓弧

然後呢,這裡有乙個pathmeasure,簡單點說,這玩意就是用來實現path座標點的追蹤,你也可以認為是path座標的計算器,具體pathmeasure的常見的用法如下表所示:

pathmeasure的常見方法

方法含義

setpath()

該方法將path與pathmeasure繫結起來

getlength()

該方法用於獲得path路徑的長度

getsegment()

該方法用於擷取整個path的片段

nextcontour()

該方法用於切換到下乙個路徑

這裡我們通過動畫從0——1之間的變化,來改變所畫圓的弧度:

circleanimator = valueanimator.offloat(0, 1);

circleanimator.addupdatelistener(new valueanimator.animatorupdatelistener()

});複製**

(2)、接下來畫完圓之後,我們要開始畫對鉤了:

if (circlevalue == 1) 

複製**

這裡的座標我是根據ui給的圖大致算出來的,可以參考下面這張圖的虛線和實現,對鉤的起始座標在座標軸中大致是getwidth() / 8 * 3,你也可以根據你的需求來畫出這個對鉤,其實就是兩段路徑,分別用pathlineto方法來實現:

mpaint.setcolor(loadfailurecolor);

mpathcircle.addcircle(getwidth() / 2, getwidth() / 2, progressradius, path.direction.cw);

mpathmeasure.setpath(mpathcircle, false);

mpathmeasure.getsegment(0, circlevalue * mpathmeasure.getlength(), mpathcircledst, true);

canvas.drawpath(mpathcircledst, mpaint);

if (circlevalue == 1)

if (failvalueright == 1)

複製**

android自定義之仿支付寶支付成功、失敗狀態的載入進度

自定義view(三)使用path仿支付寶支付成功效果

pathmeasure之迷徑追蹤

同時感謝以上引用到部落格的主人,感謝!!!

AwesomeMenu,仿Path主選單效果

專案主頁 awesomemenu 專案主頁 用法簡介 通過建立選單各個單元項來建立選單 uiimage storymenuitemimage uiimage imagenamed bg menuitem.png uiimage storymenuitemimagepressed uiimage im...

Android開發之Path詳解

1 lineto 方法預覽 public void lineto float x,float y 首先講解的的lineto,為啥先講解這個呢?是因為moveto setlastpoint close都無法直接看到效果,借助有具現化效果的lineto才能讓這些方法現出原形。lineto很簡單,只有乙個...

android 仿花椒送花效果

今天寫乙個單個的,明天寫乙個很多那種花向上運動的效果,單個的很簡單,就是繪製乙個二階或者三階貝塞爾曲線,然後不斷的去改變這個離曲線起點位置的值,就可以求出座標,這個都是api給我們提供好了的,我們只負責調就行,如果對path不熟悉的話,要先去看下path是怎麼回事,path是在繪製界是很重要的乙個類...