自定义View（三）使用Path仿支付宝支付成功效果

在使用支付宝支付成功时，会有一个转圈之后画对勾的效果，就像如下图一样：

支付宝支付效果

那么这种效果是怎样实现的呢?有人可能会说这简单，让ui做一个gif就可以了，但是图片占用内存很大，而且这个效果也不是很麻烦，完全可以通过自定义view实现，下面就为大家说一下是怎样实现的。
我们这里需要的是Path这个类，这个类的作用是绘画路径。既然是自定义view，少不了使用画笔Paint，首先在构造方法里面初始化画笔：

 public MyMark(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

  private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mLineWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#8cc350"));
    }

我们仔细看这个效果其实是由两个组成的，第一个是一个圆，第二个是一个对勾，所以我们需要用到两个Path对象：

 private void initPath() {
        mPath1 = new Path();
        mPath2 = new Path();
        dst1 = new Path();
        dst2 = new Path();
        mPathMeasure = new PathMeasure();
        valueAnimator1 = ValueAnimator.ofFloat(0, 1);
        valueAnimator1.setDuration(1000);
        valueAnimator1.start();
        valueAnimator2 = ValueAnimator.ofFloat(0, 1);
        valueAnimator2.setDuration(1000);
        valueAnimator1.addUpdateListener(this);
        valueAnimator2.addUpdateListener(this);
    }

在绘画路径时还需要用到PathMeasure， PathMeasure主要用来测量path,通过它,我们可以得到路径上特定的点的坐标等等，此外还需要两个动画对象，用来控制路径的动画。
之后重写onDraw方法，在该方法中对两个path对象添加所需要的路径：

 mPath1.addCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2 - mLineWidth / 2, Path.Direction.CW);
 mPath2.moveTo(getWidth() * 0.2f, getHeight() * 0.5f);
 mPath2.lineTo(getWidth() * 0.45f, getHeight() * 0.7f);
 mPath2.lineTo(getWidth() * 0.78f, getHeight() * 0.38f);

然后给PathMeasure设置path对象：

   mPathMeasure.setPath(mPath1, false);
   mPathMeasure.getSegment(0, v1 * mPathMeasure.getLength(), dst1, true);
   canvas.drawPath(dst1, mPaint);

  @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        if (animation.equals(valueAnimator1)) {
            v1 = (float) animation.getAnimatedValue();
            invalidate();
            if (v1 == 1) {
                valueAnimator2.start();
            }
        } else if (animation.equals(valueAnimator2)) {
            v2 = (float) animation.getAnimatedValue();
            invalidate();
        }
    }

setPath第一个参数是path对象，这里就不用说了，第二个参数是是否计算path闭合的长度，这里需要false，因为在画对勾的时候是不需要终点和起点相连的。这里的v1是从动画监听事件中获取的渐变值，用来不断刷新路径的进度，比较关键的方法是getSegment，该方法的作用是获取两点之间的路径片段，当然dst1也是新建出来的，起始点设置为0，终点就是从动画中获取的进度乘上路径的总长度，最后使用canvas画出来。截止到现在我们只是画出了外面的圆圈，那里面的对勾怎么画出来呢？我们在前面初始化过两个path，所以我们需要接着把第二个path也画出来：

  if (v1 == 1) {
      mPathMeasure.nextContour();
      mPathMeasure.setPath(mPath2, false);
      mPathMeasure.getSegment(0, v2 * mPathMeasure.getLength(), dst2, true);
      canvas.drawPath(dst2, mPaint);
  }

由于是两个不同的路径，所以pathmeasure需要调用nextContour方法切换到另外一个路径上。到此为止，支付成功的效果已经全部结束。
为了让大家了解整个过程，这里附上失败画X的全部代码，大家可以参考一下：

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Administrator on 2016/12/9.
 */

public class MyFork extends View implements ValueAnimator.AnimatorUpdateListener {

    private Paint mPaint;
    private Path dst1;
    private Path dst2;
    private Path dst3;
    private float v1;
    private float v2;
    private float v3;
    private Path mPath1;
    private Path mPath2;
    private Path mPath3;
    private PathMeasure mPathMeasure;
    private ValueAnimator valueAnimator1;
    private ValueAnimator valueAnimator2;
    private ValueAnimator valueAnimator3;
    private float mLineWidth = 10;

    public MyFork(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        initPath();
    }

    private void initPath() {
        mPath1 = new Path();
        mPath2 = new Path();
        mPath3 = new Path();
        dst1 = new Path();
        dst2 = new Path();
        dst3 = new Path();
        mPathMeasure = new PathMeasure();
        valueAnimator1 = ValueAnimator.ofFloat(0, 1);
        valueAnimator1.setDuration(1000);
        valueAnimator1.start();
        valueAnimator2 = ValueAnimator.ofFloat(0, 1);
        valueAnimator2.setDuration(500);
        valueAnimator3 = ValueAnimator.ofFloat(0, 1);
        valueAnimator3.setDuration(500);
        valueAnimator1.addUpdateListener(this);
        valueAnimator2.addUpdateListener(this);
        valueAnimator3.addUpdateListener(this);
    }

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mLineWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.RED);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath1.addCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2 - mLineWidth / 2, Path.Direction.CW);
        mPath2.moveTo(getWidth() * 0.3f, getHeight() * 0.3f);
        mPath2.lineTo(getWidth() * 0.7f, getHeight() * 0.7f);
        mPath3.moveTo(getWidth() * 0.7f, getHeight() * 0.3f);
        mPath3.lineTo(getWidth() * 0.3f, getHeight() * 0.7f);
        mPathMeasure.setPath(mPath1, false);
        mPathMeasure.getSegment(0, v1 * mPathMeasure.getLength(), dst1, true);
        canvas.drawPath(dst1, mPaint);
        if (v1 == 1) {
            mPathMeasure.nextContour();
            mPathMeasure.setPath(mPath2, false);
            mPathMeasure.getSegment(0, v2 * mPathMeasure.getLength(), dst2, true);
            canvas.drawPath(dst2, mPaint);
        }
        if (v2 == 1) {
            mPathMeasure.nextContour();
            mPathMeasure.setPath(mPath3, false);
            mPathMeasure.getSegment(0, v3 * mPathMeasure.getLength(), dst3, true);
            canvas.drawPath(dst3, mPaint);
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        if (animation.equals(valueAnimator1)) {
            v1 = (float) animation.getAnimatedValue();
            invalidate();
            if (v1 == 1) {
                valueAnimator2.start();
            }
        } else if (animation.equals(valueAnimator2)) {
            v2 = (float) animation.getAnimatedValue();
            invalidate();
            if (v2 == 1) {
                valueAnimator3.start();
            }
        } else if (animation.equals(valueAnimator3)) {
            v3 = (float) animation.getAnimatedValue();
            invalidate();
        }
    }
}