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

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

前言

使用支付宝付款时，我们可以看到成功或者失败都会有个动画提示，如果我们需要做这样的效果的话，当然，你可以让设计师给你做个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);//设置时长为1000msmCircleAnimator.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;/** * Created by Mooreli on 2016/12/12. */public class ResultAnimation extends VIEw implements ValueAnimator.AnimatorUpdateListener { private Context mContext; /**  * paint对象  */ private Paint mPaint; /**  * Path和对应的空Path用来填充  */ private Path mPathCircle; private Path mPathCircleDst; private Path mPathRight; private Path mPathRightDst; private Path mPathWrong1; private Path mPathWrong2; private Path mPathWrong1Dst; private Path mPathWrong2Dst; /**  * Path管理  */ private PathMeasure mPathMeasure; /**  * 动画  */ private ValueAnimator mCircleAnimator; private ValueAnimator mRightAnimator; private ValueAnimator mWrong1Animator; private ValueAnimator mWrong2Animator; /**  * 当前绘制进度占总Path长度百分比  */ 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,Path.Direction.CW);  mPathMeasure.setPath(mPathCircle,false);  mPathMeasure.getSegment(0,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,mWrong1Percent * mPathMeasure.getLength(),mPathWrong1Dst,true);    canvas.drawPath(mPathWrong1Dst,mPaint);   }   if (mWrong1Percent == 1) {    mPathMeasure.nextContour();    mPathMeasure.setPath(mPathWrong2,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(); } /**  * 固定写死了宽高，可重新手动调配  *  * @param wIDthMeasureSpec  * @param heightmeasureSpec  */ @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) {  super.onMeasure(wIDthMeasureSpec,heightmeasureSpec);  setMeasuredDimension(dp2px(50),dp2px(50)); }}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义View系列之Path绘制仿支付宝支付成功动画全部内容，希望文章能够帮你解决Android自定义View系列之Path绘制仿支付宝支付成功动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。