Android自定义View系列之Path绘制仿支付宝支付成功动画

前言

使用支付宝付款时，我们可以看到成功或者失败都会有个动画提示，如果我们需要做这样的效果的话，当然，你可以让设计师给你做个GIF，但是我们知道图像比较耗内存的，我们自己可以用代码实现还是代码实现好点吧。

效果

实现方法

首先我们需要了解PathMeasure这个类，这个类我们可以理解为用来管理Path。我们主要看几个方法。

PathMeasure()： 构造方法 ，实例化一个对象

PathMeasure(Path path,boolean isClosed)：传入Path对象和是否闭合，path对象不能为空

getLength()：获取当前轮廓、外形的总长度， 如果没有设置Path对象，返回0

getSegment(float startD,float stopD,Path dst,boolean startWithMoveTo)：调用这个方法，我们可以获取到指定范围内的一段轮廓，存入到dst参数中。所以，这个方法传入的参数分别为长度起始值、结束值、装这一段路径的Path对象、是否MoveTo。另外，这个方法返回值为Boolean类型，如果getLength为0的话，返回false，或者startD > stopD，同样返回false。

setPath(Path path , boolean isClosed)：给当前PathMeasure对象设置Path

nextContour()：移动到下一个轮廓

然后我们需要动起来，我们知道invalidate()方法可以刷新界面，也就是重新调用onDraw()方法，所以我们要不停调用invalidate方法，在onDraw方法中改变参数，这样实现动的效果。所以可以用到刚刚介绍的getSegment方法，不断改变获取的范围，从0 * getLength，到1 * getLength，最后绘制完整。所以我们需要一个在一秒内或两秒内一个从0到1的值的变化，so，我们使用ValueAnimator这个类来实现。

//实例化对象
mCircleAnimator = ValueAnimator.ofFloat(0, 1);
//设置时长为1000ms
mCircleAnimator.setDuration(1000);
//开始动画
mCircleAnimator.start();
//设置动画监听
mCircleAnimator.addUpdateListener(this);

动画开始后，在监听方法中获取当前进度并且重绘图像

mCirclePercent = (float)animation.getAnimatedValue();
invalidate();

在onDraw方法中，绘制图像

//画圆
mPathCircle.addCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2 - mLineWidth, Path.Direction.CW);
mPathMeasure.setPath(mPathCircle, false);
mPathMeasure.getSegment(0, mCirclePercent * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);

附上源码，欢迎点评

package com.mintmedical.wavedemo;
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.util.Log;
import android.view.View;

public class ResultAnimation extends View implements ValueAnimator.AnimatorUpdateListener {
 private Context mContext;
 
 private Paint mPaint;
 
 private Path mPathCircle;
 private Path mPathCircleDst;
 private Path mPathRight;
 private Path mPathRightDst;
 private Path mPathWrong1;
 private Path mPathWrong2;
 private Path mPathWrong1Dst;
 private Path mPathWrong2Dst;
 
 private PathMeasure mPathMeasure;
 
 private ValueAnimator mCircleAnimator;
 private ValueAnimator mRightAnimator;
 private ValueAnimator mWrong1Animator;
 private ValueAnimator mWrong2Animator;
 
 private float mCirclePercent;
 private float mRightPercent;
 private float mWrong1Percent;
 private float mWrong2Percent;
 
 private int mLineWidth;
 
 public static final int RESULT_RIGHT = 1;
 public static final int RESULT_WRONG = 2;
 
 private int mResultType = RESULT_WRONG;
 public ResultAnimation(Context context) {
  super(context);
  mContext = context;
  init();
 }
 public ResultAnimation(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  init();
 }
 public ResultAnimation(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  mContext = context;
  init();
 }
 private void init() {
  mLineWidth = dp2px(3);
  mPaint = new Paint();
  mPaint.setAntiAlias(true);
  mPaint.setStrokeWidth(mLineWidth);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setColor(Color.GREEN);
  initPath();
 }
 private void initPath() {
  mPathCircle = new Path();
  mPathCircleDst = new Path();
  mPathRight = new Path();
  mPathRightDst = new Path();
  mPathWrong1 = new Path();
  mPathWrong2 = new Path();
  mPathWrong1Dst = new Path();
  mPathWrong2Dst = new Path();
  mPathMeasure = new PathMeasure();
  //实例化对象
  mCircleAnimator = ValueAnimator.ofFloat(0, 1);
  //设置时长为1000ms
  mCircleAnimator.setDuration(1000);
  //开始动画
  mCircleAnimator.start();
  //设置动画监听
  mCircleAnimator.addUpdateListener(this);
  mRightAnimator = ValueAnimator.ofFloat(0, 1);
  mRightAnimator.setDuration(500);
  mRightAnimator.addUpdateListener(this);
  mWrong1Animator = ValueAnimator.ofFloat(0, 1);
  mWrong1Animator.setDuration(300);
  mWrong1Animator.addUpdateListener(this);
  mWrong2Animator = ValueAnimator.ofFloat(0, 1);
  mWrong2Animator.setDuration(300);
  mWrong2Animator.addUpdateListener(this);
 }
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  if (mResultType == RESULT_RIGHT) {
   mPaint.setColor(Color.GREEN);
  } else {
   mPaint.setColor(Color.RED);
  }
  //画圆
  mPathCircle.addCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2 - mLineWidth, Path.Direction.CW);
  mPathMeasure.setPath(mPathCircle, false);
  mPathMeasure.getSegment(0, mCirclePercent * mPathMeasure.getLength(), mPathCircleDst, true);
  canvas.drawPath(mPathCircleDst, mPaint);
  if (mResultType == RESULT_RIGHT) {
   //画对勾
   mPathRight.moveTo(getWidth() / 4, getWidth() / 2);
   mPathRight.lineTo(getWidth() / 2, getWidth() / 4 * 3);
   mPathRight.lineTo(getWidth() / 4 * 3, getWidth() / 4);
   if (mCirclePercent == 1) {
    mPathMeasure.nextContour();
    mPathMeasure.setPath(mPathRight, false);
    mPathMeasure.getSegment(0, mRightPercent * mPathMeasure.getLength(), mPathRightDst, true);
    canvas.drawPath(mPathRightDst, mPaint);
   }
  } else {
   mPathWrong1.moveTo(getWidth() / 4 * 3, getWidth() / 4);
   mPathWrong1.lineTo(getWidth() / 4, getWidth() / 4 * 3);
   mPathWrong2.moveTo(getWidth() / 4, getWidth() / 4);
   mPathWrong2.lineTo(getWidth() / 4 * 3, getWidth() / 4 * 3);
   if (mCirclePercent == 1) {
    mPathMeasure.nextContour();
    mPathMeasure.setPath(mPathWrong1, false);
    mPathMeasure.getSegment(0, mWrong1Percent * mPathMeasure.getLength(), mPathWrong1Dst, true);
    canvas.drawPath(mPathWrong1Dst, mPaint);
   }
   if (mWrong1Percent == 1) {
    mPathMeasure.nextContour();
    mPathMeasure.setPath(mPathWrong2, false);
    mPathMeasure.getSegment(0, mWrong2Percent * mPathMeasure.getLength(), mPathWrong2Dst, true);
    canvas.drawPath(mPathWrong2Dst, mPaint);
   }
  }
 }
 private int dp2px(int dp) {
  float scale = mContext.getResources().getDisplayMetrics().density;
  return (int) (scale * dp + 0.5f);
 }
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
  //圆形动画
  if (animation.equals(mCircleAnimator)) {
   mCirclePercent = (float) animation.getAnimatedValue();
   invalidate();
   Log.e("TEST","percent:"+mCirclePercent);
   if (mCirclePercent == 1) {
    if (mResultType == RESULT_RIGHT)
     mRightAnimator.start();
    else
     mWrong1Animator.start();
   }
  }
  //正确时 对勾动画
  else if (animation.equals(mRightAnimator)) {
   mRightPercent = (float) animation.getAnimatedValue();
   invalidate();
  }
  //错误时 右侧动画
  else if (animation.equals(mWrong1Animator)) {
   mWrong1Percent = (float) animation.getAnimatedValue();
   invalidate();
   if (mWrong1Percent == 1) {
    mWrong2Animator.start();
   }
  }
  //错误时 左侧动画
  else if (animation.equals(mWrong2Animator)) {
   mWrong2Percent = (float) animation.getAnimatedValue();
   invalidate();
  }
 }
 public void setmResultType(int mResultType) {
  this.mResultType = mResultType;
  invalidate();
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  setMeasuredDimension(dp2px(50), dp2px(50));
 }
}

github地址: https://github.com/lizebinbin

您可能感兴趣的文章:Android自定义View实现折线图效果Android自定义View之酷炫圆环（二）Android自定义View实现竖直跑马灯效果案例解析Android自定义view制作绚丽的验证码Android自定义View之继承TextView绘制背景最近较流行的效果 Android自定义View实现倾斜列表/图片Android自定义view实现阻尼效果的加载动画Android自定义View制作仪表盘界面Android自定义View之酷炫数字圆环Android仿360悬浮小球自定义view实现示例Android编程基于自定义view实现公章效果示例【附源码下载】