Android自定義View——實(shí)現(xiàn)水波紋效果類似剩余流量球

三個點(diǎn)???pre???ber???block???span???初始化???move???理解最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終于功夫不負(fù)有心人最后實(shí)現(xiàn)了想要的效果，一起來看下吧：

效果圖鎮(zhèn)樓

一：先一步一步來分解一下實(shí)現(xiàn)的過程

需要繪制一個正弦曲線(sin)或者余弦曲線(cos)

通過水平平移曲線來的到像水波波動的效果

水平移動的同時還需要有水位上漲，也就是向上平移

裁剪畫布為圓形，在圓形區(qū)域繪制曲線

通過上面4步就可以實(shí)現(xiàn)了

二：現(xiàn)在就來實(shí)現(xiàn)第一步，繪制一個sin曲線；這里畫了一張圖來幫助理解，在PhotoShop中我們繪制一個貝塞爾曲線可以清楚的看到它的控制點(diǎn)如圖：

?????

繪制貝塞爾曲線我們必須要知道三個點(diǎn)：起點(diǎn)、控制點(diǎn)、終點(diǎn)；有了這三個點(diǎn)我們就可以繪制一段簡單二階貝塞爾曲線。從圖中我們可以看出 起點(diǎn) 控制點(diǎn)p1 x1 這三個點(diǎn)繪制了一段曲線，也就是通過path.quadTo()函數(shù)添加一個曲線路徑。

???假設(shè)我們需要繪制一個周期的sin曲線，那么我們就只需要知道起點(diǎn)、一個周期的寬度、振幅；就可以繪制一個sin曲線了。

三：下面就來看下代碼的實(shí)際操作了，這里就直接省略掉一些畫筆初始化的操作了可以點(diǎn)擊這里查看源碼

protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){

super.onMeasure(widthMeasureSpec,heightMeasureSpec);

//獲取view的寬度

width=getViewSize(800,widthMeasureSpec);

//獲取view的高度

height=getViewSize(400,heightMeasureSpec);

//獲取起點(diǎn)坐標(biāo)

startPoint=newPoint(0,height/2);

}

1

2

3

4

5

6

7

8

9

首先肯定是要獲取到畫布的大小才能確定好起點(diǎn)的坐標(biāo)，有了起點(diǎn)坐標(biāo)就可以開始繪制我們的曲線了

在ondraw()函數(shù)中進(jìn)行曲線的繪制

/*sin曲線 1/4個周期的寬度*/

privateintcycle=200;

/*sin曲線振幅的高度*/

privateintwaveHeight=200;

@Override

protectedvoidonDraw(Canvascanvas){

super.onDraw(canvas);

path.moveTo(startPoint.x,startPoint.y);

intj=1;

//循環(huán)繪制正弦曲線 循環(huán)一次半個周期

for(inti=1;i<=8;i++){

if(i%2==0){

//波峰

path.quadTo(startPoint.x+(cycle*j),startPoint.y+waveHeight,

startPoint.x+(cycle*2)*i,startPoint.y);

}else{

//波谷

path.quadTo(startPoint.x+(cycle*j),startPoint.y-waveHeight,

startPoint.x+(cycle*2)*i,startPoint.y);

}

j+=2;

}

//繪制封閉的曲線

path.lineTo(width,height);//右下角

path.lineTo(startPoint.x,height);//左下角

path.lineTo(startPoint.x,startPoint.y);//起點(diǎn)

path.close();

canvas.drawPath(path,paint);

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

經(jīng)過上面一系例操作一個水波紋效果就出來啦

四：接下來就是水平移動這個曲線了為了移動起來更加好看，我們需要在屏幕外面開始繪制一個周期，如下：

//初始化的時候?qū)⑵瘘c(diǎn)移至屏幕外一個周期

startPoint=newPoint(-cycle*4,height/2);

//繼續(xù)在ondraw()函數(shù)最后追加平移代碼

//判斷是不是平移完了一個周期

if(startPoint.x+40>=0){

//滿了一個周期則恢復(fù)默認(rèn)起點(diǎn)繼續(xù)平移

startPoint.x=-cycle*4;

}

//每次波形的平移量 40

startPoint.x+=40;

postInvalidateDelayed(150);

path.reset();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

只需要這樣就可以產(chǎn)生水波效果了，一起來看效果圖吧。

五：接下來就是要將畫布變成圓形了(其實(shí)還是個矩形，只是繪畫區(qū)域在你所裁剪的區(qū)域)，然后在里面實(shí)現(xiàn)水波紋就哦的K了；完整的繪制代碼如下：

@OverrideprotectedvoidonDraw(Canvascanvas){

super.onDraw(canvas);

//裁剪畫布為圓形

PathcirclePath=newPath();

circlePath.addCircle(width/2,height/2,width/2,Path.Direction.CW);

canvas.clipPath(circlePath);

canvas.drawPaint(circlePaint);

canvas.drawCircle(width/2,height/2,width/2,circlePaint);

//以下操作都是在這個圓形畫布中操作

//根據(jù)進(jìn)度改變起點(diǎn)坐標(biāo)的y值

startPoint.y=(int)(height-(progress/100.0*height));

//起點(diǎn)

path.moveTo(startPoint.x,startPoint.y);

intj=1;

//循環(huán)繪制正弦曲線 循環(huán)一次半個周期

for(inti=1;i<=8;i++){

if(i%2==0){

path.quadTo(startPoint.x+(cycle*j),startPoint.y+waveHeight,startPoint.x+(cycle*2)*i,startPoint.y);

}else{

path.quadTo(startPoint.x+(cycle*j),startPoint.y-waveHeight,startPoint.x+(cycle*2)*i,startPoint.y);

}

j+=2;

}

//繪制封閉的曲線

path.lineTo(width,height);//右下角

path.lineTo(startPoint.x,height);//左下角

path.lineTo(startPoint.x,startPoint.y);//起點(diǎn)

path.close();

canvas.drawPath(path,paint);

drawText(canvas,textPaint,progress+"%");

//判斷是不是平移完了一個周期

if(startPoint.x+40>=0){

//滿了一個周期則恢復(fù)默認(rèn)起點(diǎn)繼續(xù)平移

startPoint.x=-cycle*4;

}

//每次波形的平移量 40

startPoint.x+=40;

if(autoIncrement){

if(progress>=100){

progress=0;

}else{

progress++;

}

}

postInvalidateDelayed(150);

path.reset();

}

Android自定義View——實(shí)現(xiàn)水波紋效果類似剩余流量球

來源: http://www.bubuko.com/infodetail-2294788.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的android 立体 流量球,Android自定义View——实现水波纹效果类似剩余流量球的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。