在使用支付宝支付成功时，会有一个转圈之后画对勾的效果，就像如下图一样：
支付宝支付效果
那么这种效果是怎样实现的呢?有人可能会说这简单，让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();
}
}
}
