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

前言

使用支付宝付款时，我们可以看到成功或者失败都会有个动画提示，如果我们需要做这样的效果的话，当然，你可以让设计师给你做个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;

/**
 * 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, 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();
 }

 /**
  * 固定写死了宽高，可重新手动调配
  *
  * @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支付宝
自定义view的绘制流程、自定义view 绘制 动画、自定义view清除绘制、自定义view path、自定义view绘制，以便于您获取更多的相关知识。

时间： 2025-01-01 13:57:20

Android自定义View系列之Path绘制仿支付宝支付成功动画_Android的相关文章

Android自定义View之继承TextView绘制背景_Android

本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

Android自定义View实现shape图形绘制

概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

Android自定义view实现圆形、圆角和椭圆图片(BitmapShader图形渲染)_Android

一.前言 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的.实现圆角图片的方法其实不少,常见的就是利用Xfermode,Shader.本文直接继承ImageView,使用BitmapShader方法来实现圆形.圆角和椭圆的绘制,等大家看我本文的方法后,其他的类似形状也就都能举一反三来来画出来了. 二.效果图: 三.BitmapShader简介 BitmapShader是Shader的子类,可以通过Paint.setShader(Shader

Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解

首先声明本文是基于GitHub上"baoyongzhang"的SwipeMenuListView修改而来,该项目地址: https://github.com/baoyongzhang/SwipeMenuListView 可以说这个侧滑删除效果是我见过效果最好且比较灵活的项目,没有之一!!! 但是在使用它之前需要给大家提两点注意事项: 1,该项目支持Gradle dependence,但是目前作者提供的依赖地址对应的项目不是最新的项目,依赖过后的代码与demo中使用的不一致,会提示没有B

Android自定义View之继承TextView绘制背景

本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

Android自定义View之圆形进度条总结

最近撸了一个圆形进度条的开源项目,算是第一次完完整整的使用自定义 View .在此对项目开发思路做个小结,欢迎大家 Star 和 Fork. 该项目总共实现了三种圆形进度条效果 CircleProgress:圆形进度条,可以实现仿 QQ 健康计步器的效果,支持配置进度条背景色.宽度.起始角度,支持进度条渐变 DialProgress:类似 CircleProgress,但是支持刻度 WaveProgress:实现了水波纹效果的圆形进度条,不支持渐变和起始角度配置,如需此功能可参考 CircleP

Android中PathMeasure仿支付宝支付动画

前言 在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20

android仿支付宝付款成功及"天女散花"效果实现——看PathMeasure大展身手

话说,在前面两篇文章中,我们学习了BitmapShader.Path的基本使用,那么这一篇文章,咱们接着来学习一下PathMeasure的用法.什么,你没听说过PathMeasure?那你就要OUT咯~ 项目效果图 废话不多说,在开始讲解之前,先看下最终实现的效果. 效果一: 仿支付宝支付成功效果 效果二: 这两个项目都是使用Path和PathMeature配合完成的,由其他项目改造而来 项目一是七叔写的,我对代码进行了大量改造. 项目二是不小心搜到的,然后进行了改造,原文请戳这里 本文代码请到