廢話不說 先上效果圖祭钉。
看起來是不是比起那些普通的加載“高大上”一點(diǎn)。
怎么去做了己沛，很簡(jiǎn)單慌核，真的距境！
一起來看看怎么實(shí)現(xiàn)的吧。
實(shí)現(xiàn)思路：
1.首先我們仔細(xì)看看這效果圖的灰色背景垮卓， 你就會(huì)說垫桂，什么水滴形，不就是個(gè)圓和三角形嗎!
對(duì)嘛粟按，你看诬滩，這不就簡(jiǎn)單了嗎，繪制一個(gè)實(shí)心的圓和三角形灭将。
i)設(shè)置圓心疼鸟、半徑和三角形三個(gè)點(diǎn)的坐標(biāo)。
代碼如下：
//設(shè)備寬高和dpi密度
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
sWidth = displayMetrics.widthPixels;
sHeight = displayMetrics.heightPixels;
//320為我的測(cè)試機(jī)dpi密度庙曙，以次繪制視圖
sDensityDpi = displayMetrics.densityDpi / 320;
//圓心坐標(biāo)賦值
pointerX = pointerY = Math.min(sWidth, sHeight) / 2;
//半徑和三角形邊長(zhǎng)賦值
mRaduis = pointerX / 5;
//賦值頂點(diǎn)坐標(biāo)
mTriangleX1 = pointerX;
mTriangleY1 = (float) (pointerY - 1.5 * mRaduis * Math.sin(Math.PI / 3));
mTriangleX2 = (float) (pointerX - mRaduis * Math.cos(Math.PI / 3));
mTriangleX3 = (float) (pointerX + mRaduis * Math.cos(Math.PI / 3));
mTriangleY2 = mTriangleY3 = (float) (pointerY - mRaduis * Math.sin(Math.PI / 3));
ii)然后開始畫圓和三角形空镜，三角形用Path這個(gè)類。
代碼如下：
//設(shè)置畫筆顏色和樣式
mPaint.setColor(0xFFDEE0DD);
mPaint.setStyle(Paint.Style.FILL);
//繪制圓
canvas.drawCircle(pointerX, pointerY, mRaduis, mPaint);
//繪制頂部三角形
mPath.moveTo(mTriangleX1, mTriangleY1);
mPath.lineTo(mTriangleX2, mTriangleY2);
mPath.lineTo(mTriangleX3, mTriangleY3);
//lineto起點(diǎn)
mPath.close();
canvas.drawPath(mPath, mPaint);
這樣這個(gè)盜版的水滴形狀的背景就繪制出來了捌朴。
2.然后就是中間那些藍(lán)色的東西吴攒，仔細(xì)看看，是不是感覺像一個(gè)越來越大的實(shí)心弧形砂蔽，最后那里就是一個(gè)小三角形洼怔。
畫弧，就是上一個(gè)汽車儀表盤里面的速度區(qū)域的扇形一樣察皇，只是去掉了到圓心的一部分。
i）我們先確定這個(gè)弧形的外切圓泽台，其實(shí)就是圓形背景的外切圓 縮小了一點(diǎn)什荣。
也就是左上和右下點(diǎn)的坐標(biāo)調(diào)整了一下。
代碼如下：
// 初始化速度范圍的2個(gè)扇形外切矩形
progressRectF = new RectF(
pointerX - mRaduis + 8 * sDensityDpi,
pointerY - mRaduis + 8 * sDensityDpi,
pointerX + mRaduis - 8 * sDensityDpi,
pointerY + mRaduis - 8 * sDensityDpi
);
ii）然后我們看看這個(gè)弧形的起始角度怀酷，它是從底部開始的稻爬，所以開始是90度。
然后慢慢的減小蜕依，最后多出一個(gè)小三角形桅锄。畫完之后，再還原 相關(guān)參數(shù)样眠。
代碼如下：
//修改畫筆顏色
mPaint.setColor(0xFF13B5E8);
startAngle -= 5;
sweepAngle += 10;
if (sweepAngle < 310) {
canvas.drawArc(progressRectF, startAngle, sweepAngle, false, mPaint);
postInvalidateDelayed(100);
} else {
canvas.drawArc(progressRectF, -90, 360, false, mPaint);
trianglePath1.moveTo(mTriangleX1, (float) (mTriangleY1 + mRaduis * Math.sin(Math.PI / 3) /3 ));
trianglePath1.lineTo(mTriangleX2 + 2 * (mRaduis / 2 - triangleR / 2), mTriangleY2 + mRaduis / 2 - triangleR / 2);
trianglePath1.lineTo(mTriangleX3 - 2 * (mRaduis / 2 - triangleR / 2), mTriangleY3 + mRaduis / 2 - triangleR / 2);
trianglePath1.close();
canvas.drawPath(trianglePath1, mPaint);
startAngle = 90;
sweepAngle = 0;
triangleHeight = 0;
postInvalidateDelayed(500);
}
看友瘤，效果圖就出來了。
是不是很簡(jiǎn)單檐束？
博客地址：http://blog.csdn.net/lxk_1993
如果你喜歡我的博客辫秧，請(qǐng)關(guān)注我。
歡迎留言拍磚被丧。
源碼地址:
github：https://github.com/103style/QQLoading-WaterDrop 覺得不錯(cuò)的話盟戏，點(diǎn)下star,謝謝
csdn下載：http://download.csdn.net/download/lxk_1993/9521444
如果覺得不錯(cuò)的話绪妹，請(qǐng)幫忙點(diǎn)個(gè)贊唄。
以上
掃描下面的二維碼柿究，關(guān)注我的公眾號(hào) Android1024邮旷， 點(diǎn)關(guān)注，不迷路蝇摸。
