先看效果圖:
主要構思:當progress到最大值的時候觸發動畫效果,效果都由canvas畫布上進行。
主要代碼:
@Override
protected void onDraw(Canvas canvas) {
int halfWidth = getWidth() / 2;
int halfHeight = getHeight() /2;
//this way to draw the path for progress
if(progress<MAX_PROGRESS){
canvas.drawColor(COLOR_TRANSLUCENT);
pRectF.top = halfHeight - RADIUS_PROGRESS;
pRectF.bottom = halfHeight + RADIUS_PROGRESS;
pRectF.left = halfWidth - RADIUS_PROGRESS;
pRectF.right = halfWidth + RADIUS_PROGRESS;
canvas.drawArc(pRectF, -90, ((float)progress/(float)MAX_PROGRESS)*360, false, pPaint);
canvas.save();
//this way to draw the images when animation start
}else{
int alter = progress-MAX_PROGRESS;
Path path = new Path();
path.addRect(0, 0,getWidth(),getHeight(),Path.Direction.CW);
path.addCircle(halfWidth, halfHeight,RADIUS_BIG_CIRCLE+alter*ALTER_LENTH,Path.Direction.CCW);
canvas.drawPath(path, squarePaint);
canvas.drawCircle(halfWidth, halfHeight, RADIUS_PROGRESS-alter*ALTER_LENTH, sCirclePaint);
canvas.save();
}
super.onDraw(canvas);
}
P.S 感謝7heaven告訴Path的用法下載地址 :https://github.com/arjinmc/ScaleProgressBar
技術交流QQ羣:452472392