android 仿支付宝动画,自定义view之仿支付宝动画

在学习本篇之前，你首先需要了解如下知识点：

自定义属性

实现效果图：

支付宝动画.gif

实现步骤：

绘制圆形

绘制对号的左边部分

绘制对号右边的部分

是不是感觉说了和没说一样，但思路就是这样

我们先创建一个LoadingView继承自view类，并在构造函数中加载自定义的属性值，对于LoadingView 自定义的属性只有2个，一个是圆的宽度，一个是颜色。

public class LoadingView extends View {

private int mWidth; //宽度

private int mHeight;//高度

private int mPrecent;//圆形进度

private float mLeftStep;//对号 左边进度

private float mRightStep;//对号 右边进度

private boolean endFlag;//绘制结束标记

private int mStripeWidth;//原的宽度

private int mColor;//绘制颜色

public LoadingView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public LoadingView(Context context) {

this(context, null);

}

public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

endFlag = false;

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);

mStripeWidth = (int) typedArray.getDimension(R.styleable.LoadingView_strokeWidth, 10);

mColor = typedArray.getColor(R.styleable.LoadingView_backColor, Color.WHITE);

}

为了能有动画效果，其实需要不停的调用

this.postInvalidateDelayed(100);

这个函数表示：在指定的时间后如100s后通知view进行重绘即重新进行ondraw()方法，所以可以设置进度来控制绘制效果看起来像动态变化。

绘制圆形

@Override

protected void onDraw(Canvas canvas) {

Paint p = new Paint();

p.setColor(mColor);

p.setStyle(Paint.Style.STROKE);

p.setStrokeWidth(mStripeWidth);

p.setAntiAlias(true);

if (mPrecent < 100) {

mPrecent += 5;

drawCicle(canvas, p);

}

if (!endFlag) {

this.postInvalidateDelayed(20);

}

}

/**

* 画原形

* @param canvas

* @param p

*/

private void drawCicle(Canvas canvas, Paint p) {

int endAngle = (int) (mPrecent * 3.6);

RectF rectF = new RectF(mStripeWidth, mStripeWidth, mWidth - mStripeWidth, mHeight - mStripeWidth);

canvas.drawArc(rectF, 270, endAngle, false, p);

}

画对号左边

其实要画对号左边，必须实在圆形已经绘制完成的基础上进行。

if (mPrecent < 100) {

mPrecent += 5;

drawCicle(canvas, p);

} else {

drawCicle(canvas, p);

if (mLeftStep < 1.0) {

mLeftStep += 0.1;

drawLeft(canvas, p);

}

}

这里多做了一个动作，就是进度达到100了，在绘制左边的对号之前，肯定还要再绘制一次圆形，不然就不会显示，要清楚重绘是把上次绘制的全部擦除再重新用新的画布去绘制。

/**

* 画对号左边部分

*

* @param canvas

* @param p

*/

private void drawLeft(Canvas canvas, Paint p) {

Path path = new Path();

path.moveTo(mWidth * 0.25f, mHeight * 0.5f );

path.lineTo(mWidth * 0.25f + mWidth * 0.25f * mLeftStep, mHeight * 0.5f + mHeight * 0.25f * mLeftStep );

canvas.drawPath(path, p);

}

画右边对号

原理和左边相同，在绘制对号右边之前，先把圆形和对号左边绘制出来。

@Override

protected void onDraw(Canvas canvas) {

Paint p = new Paint();

p.setColor(mColor);

p.setStyle(Paint.Style.STROKE);

p.setStrokeWidth(mStripeWidth);

p.setAntiAlias(true);

if (mPrecent < 100) {

mPrecent += 5;

drawCicle(canvas, p);

} else {

drawCicle(canvas, p);

if (mLeftStep < 1.0) {

mLeftStep += 0.1;

drawLeft(canvas, p);

} else {

drawLeft(canvas, p);

if (mRightStep < 1.0) {

mRightStep += 0.1;

drawRight(canvas, p);

} else {

endFlag = true;

drawRight(canvas, p);

}

}

}

}

/**

* 画对号右边部分

*

* @param canvas

* @param p

*/

private void drawRight(Canvas canvas, Paint p) {

Path path = new Path();

path.moveTo(mWidth * 0.5f - mStripeWidth / 2, mHeight * 0.75f);

path.lineTo(mWidth * 0.5f- mStripeWidth / 2 + mWidth * 0.25f * mRightStep, mHeight * 0.75f - mHeight * 0.5f * mRightStep );

canvas.drawPath(path, p);

}

需要注意的是，如果绘制全部完成了，就不用再发送重绘消息通知了,反之亦然。

if (!endFlag) {

this.postInvalidateDelayed(20);

}

最后就是调用，我把loadingView放到一个对话框上去显示

btLoad.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

new AlertDialog.Builder(MainActivity.this).setView(R.layout.layout).setNegativeButton("OK", null).create().show();

}

});