自定义view之仿支付宝动画

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

1. 自定义属性

2. 自定义view中常用的绘图函数
3. 最好能先学习上篇 自定义view之圆形进度条

实现效果图：

支付宝动画.gif

实现步骤：

1. 绘制圆形
2. 绘制对号的左边部分
3. 绘制对号右边的部分

是不是感觉说了和没说一样，但思路就是这样
我们先创建一个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()方法，所以可以设置进度来控制绘制效果看起来像动态变化。

1. 绘制圆形

   @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);
    }

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

 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);
    }

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

 @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);
}

4. 最后就是调用，我把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();
            }
        });

代码下载：
https://yunpan.cn/c6RQHNdFbmgE9 （提取码：4e66）