首先我們來分解一下這個動作,首先是一段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的常見方法path
的常用方法有,add
一條路徑(任意形狀,任意線條),這裡我們在path中新增了乙個圓的路徑,具體path
常見的用法如下表所示:
方法含義
moveto()
該方法移動後續操作的起點座標
lineto()
該方法是連線起始點與某一點(傳的引數)形成一條線
setlastpath()
該方法是設定path最後的座標
close()
該方法是將起點座標與終點座標連線起來形成乙個閉合的圖形(如果始終點左邊能連線的話)
addrect()
該方法是繪製乙個巨型
addroundrect()
該方法是繪製乙個圓角矩形
addoval()
該方法是繪製乙個橢圓
arcto()
該方法是繪製一段圓弧
addarc()
該方法是繪製一段圓弧
然後呢,這裡有乙個pathmeasure的常見方法pathmeasure
,簡單點說,這玩意就是用來實現path
座標點的追蹤,你也可以認為是path
座標的計算器,具體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
,你也可以根據你的需求來畫出這個對鉤,其實就是兩段路徑,分別用path
的lineto
方法來實現:
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是在繪製界是很重要的乙個類...