您的位置:首页 > 其它

一款非常好看的下载动画

2016-05-09 17:56 211 查看
废话不多说,先上效果图









在下载的时候蓝色的边会跟着下载的进度以前变化

--思路:大概的思路就是在这张图片上盖上一层视图,视图里面有画两个圆,内圆是显示加载进度的,显示的颜色是半透明的,外圆的底色也是半透明的,在将弧长分成4份,第一和第三的弧长部分显示的是浅蓝色,然后就是随着加载进度的变化而开始转动,下面贴代码

1.初始化的时候开始创建我们需要的各种图形

public CircularProgressBar(Context paramContext, AttributeSet paramAttributeSet)
{
super(paramContext, paramAttributeSet);
this.mContext = paramContext;
init();
}

private void init()
{
// this.mBgColor = -16777216;
// this.mFgColor = -1;
this.mSquarePaint = new Paint();//正方形
this.mSquarePaint.setAntiAlias(true);
this.mSquarePaint.setColor(mContext.getResources().getColor(R.color.dark_color));
this.mSquarePaint.setStyle(Paint.Style.FILL);
this.mRingPaint = new Paint();//圆环
this.mRingPaint.setAntiAlias(true);
this.mRingPaint.setColor(this.mContext.getResources().getColor(R.color.alpha_color2));
this.mRingPaint.setStyle(Paint.Style.STROKE);
this.mCircularPaint = new Paint();//圆形
this.mCircularPaint.setAntiAlias(true);
this.mCircularPaint.setColor(mContext.getResources().getColor(R.color.alpha_color2));
this.mCircularPaint.setStyle(Paint.Style.FILL);
this.mProgressRingPaint = new Paint();//进度条
this.mProgressRingPaint.setAntiAlias(true);
this.mProgressRingPaint.setColor(this.mContext.getResources().getColor(R.color.light_color));
this.mProgressRingPaint.setStyle(Paint.Style.STROKE);
}

2.重写ondraw方法,在这里面进行我们需要的加载的时候的视图变化
protected void onDraw(Canvas paramCanvas)
{
//获得圆心
this.mCenterX = (getWidth() / 2);
this.mCenterY = (getHeight() / 2);
//圆环的宽
this.mStrokeWidth = (getWidth() / 12);
this.mRadius = (11 * (getWidth() / 24));
//进度圆环的半径
this.mCircularRadius = (this.mRadius - this.mStrokeWidth / 2.0F);
this.mRingPaint.setStrokeWidth(this.mStrokeWidth);
//在圆环上的两条蓝色
this.mProgressRingPaint.setStrokeWidth(this.mStrokeWidth);
Rect localRect = new Rect();
localRect.left = 0;
localRect.top = 0;
localRect.right = getWidth();
localRect.bottom = getHeight();
RectF localRectF1 = new RectF(localRect);
float f = 14 * getWidth() / 128;
paramCanvas.drawRoundRect(localRectF1, f, f, this.mSquarePaint);
paramCanvas.drawCircle(this.mCenterX, this.mCenterY, this.mRadius, this.mRingPaint);
if ((this.mProgress >= 0) && (this.mProgress <= 100))
{
//进度条显示
RectF localRectF2 = new RectF();
localRectF2.left = (this.mCenterX - this.mCircularRadius);
localRectF2.top = (this.mCenterY - this.mCircularRadius);
localRectF2.right = (localRectF2.left + 2.0F * this.mCircularRadius);
localRectF2.bottom = (localRectF2.top + 2.0F * this.mCircularRadius);
paramCanvas.drawArc(localRectF2, -90.0F, (float)(3.6D * this.mProgress), true, this.mCircularPaint);
//圆环上的两个蓝边
RectF localRectF3 = new RectF();
localRectF3.left = (this.mCenterX - this.mRadius);
localRectF3.top = (this.mCenterY - this.mRadius);
localRectF3.right = (this.mCenterX + this.mRadius);
localRectF3.bottom = (this.mCenterY + this.mRadius);
paramCanvas.drawArc(localRectF3, (float)(3.6D * this.mProgress) - 45.0F, 90.0F, false, this.mProgressRingPaint);
paramCanvas.drawArc(localRectF3, 135.0F + (float)(3.6D * this.mProgress), 90.0F, false, this.mProgressRingPaint);
}
}3.公开一个接口,让外面的数据传递过来
public void setProgress(int paramInt)
{
this.mProgress = paramInt;
invalidate();
}4.通过handler来实现模拟下载的进度变化
public class MainActivity extends Activity {

private int i=0;
private CircularProgressBar circle;
private Handler mhandler=new Handler(){
public void dispatchMessage(android.os.Message msg) {
if(msg.what==1){
circle.setProgress(++i);
mhandler.sendEmptyMessageDelayed(1, 1000);
}
};
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circle = (CircularProgressBar) findViewById(R.id.circle);
//circle.setProgress(++i);
mhandler.sendEmptyMessage(1);
}
}

源码:http://download.csdn.net/detail/iblue007/9514735
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: