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

最新推荐文章于 2024-04-08 19:59:47 发布
最新推荐文章于 2024-04-08 19:59:47 发布
阅读量3.4k 收藏 21
点赞数 10
分类专栏： 自定义控件 文章标签： path 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lizebin_bin/article/details/53610033
版权

前言

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

欢迎star与fork~

碼农李泽斌
关注
专栏目录
Android自定义控件(二)——支付宝支付成功动画
李元静
11-07 2万+
读律看书三九年，乌纱头上有青天，男儿欲画凌烟阁，第一功名不爱钱。 不知道大家关注过没有，在你使用支付宝的过程中，有一个支付成功的动画，虽然说很小，但看起来其实还是蛮实用的，涉及的知识点有Android属性动画，Paint的getSegment()函数。 1.分析动画 首先，我们来分析一下这个动画，如上图所示，我们可以看到，先是圆自己运行闭合，然后在在圆的里面画一个✔，对于圆来说，很简...
仿支付宝支付成功动画
02-01
实现模仿支付宝支付成功以后画圆打对勾的效果，十分简单好用！
【注释张豪华版 Path酷炫动画】极速get花式Path （支付宝支付成功动画）
weixin_33734785的博客
01-04 178
概述 新年第一篇技术文章哈，大家新年快乐，先来个简单点的，主要介绍工具的使用，预预热，下周一奉上一个骚气的购物车动画按钮，敬请期待。 在前文 给我一个Path，还你一个酷炫动画 中，我详细的阐述了如何撸出一个酷炫的Path动画View，我们的口号是：I have a path.I have a view. Oh~,Path(Anim)View. 也就是说，只要有了Path，剩下的就是绚丽的动画。 ...
支付宝支付成功动画（Path）
BoyiKia的博客
03-12 1515
1.效果展示 2.实现步骤 public PathMeasureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //1.关闭硬件加速（否则有问题） set...
iOS 动画解析 支付宝支付动画 上
孟宪亮的技术博客
04-17 4130
平时在用支付宝付款时，会有一个支付中的动画和一个支付完成的动画。这篇博客主要分析一下 支付中 的动画效果，效果如下：一、动画解析为了方便观察，添加了放慢加载动画的速度并添加辅助线：从图中可以看出：加载圆弧运动轨迹可分为前半段和后半段；并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化；前半段: 从-0.5π到π，这一段运动中速度较快；StartAngle不变，始
Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画
08-31
本篇文章将探讨如何利用自定义View来实现支付宝支付成功的炫酷Path动画，这一技术对于提升用户体验和增加应用趣味性至关重要。 首先，我们需要理解Android自定义View的基本原理。自定义View通常需要继承自Android的...
Android自定义View实现支付宝支付成功动画：Path绘制详解
本文档主要探讨了如何在Android开发中通过自定义View实现类似支付宝支付成功时的动态动画，以Path绘制技术来模拟这种效果。作者首先强调了使用纯代码实现动画的优势，相比于直接使用GIF图，代码实现不仅更节省内存，...
自定义View实现支付宝支付成功动画
11-07
本文将深入探讨如何使用属性动画和PathMeasure来实现一个支付宝支付成功的动画效果。 首先，我们需要理解Android中的自定义View。自定义View是通过继承View或已有的View类（如TextView、ImageView等）并重写其...
模仿支付宝支付成功特效:svg圆圈转动+打钩
树上骑个猴的博客
02-09 2120
效果图(这里用点击事件来模拟触发事件): 代码： HTML <main> <div class="box"> <svg class="arrow" width="40" height="40" viewBox="0 0 40 40"> <circle cx="50%" ...
Android中利用矢量动画制作支付宝支付成功样式
水月洞天
07-22 733
之前我们学习了矢量动画，今天就利用适量动画制作一个支付宝支付成功后打钩的动画。其实这个动画简单描述如下：首先它会画一个圈，接着在圈内打个对勾。这个效果在很多地方都可以使用，比如提交成功，压缩成功等一系列耗时操作之后显示。好了，废话不多说，还是老规矩，一步一步跟着来。 1.分析 这个动画包含了两部分，一部分是画圈动画，另一部分是打钩动画。画圈动画结束后才开始打钩动画，所以他们是有顺序的。 2.画圈动画 animated_pay_circle.xml <animated-vector xmln
android支付宝动画,android仿照支付宝支付成功的动画一
weixin_36473811的博客
05-25 248
上边是效果图 上边是依据两种方式实现的，先说地一个效果的实现要实现地一个效果，肯定需要掌握path,patnMeasure,valueAnimator这里跟自定义view关系不是很大思路１　先实现一个静态的效果(用path来绘制) (为什么使用path呢？因为使用path我们可以用pathMeasure来测量出path没一个点的坐标)２　然后用pathMeasure来测量path然后结合value...
Android学习笔记-自定义仿支付宝ProgressBar动画
打豆豆1992的专栏
10-23 2023
最近开始学习自定义控件，看到支付宝支付的ProgressBar动画感觉不错，就学着也做一个这样的ProgressBar。 首先看效果图 原理：  一个线程无限改变进度画弧形，当外部告知结束，通过判断结果呈现成功或者失败动画，通过path坐标缓慢变化就可以实现动画效果 代码如下： public class LoadingBar extends View { /**
关于PathMeasure分析path测量的问题
EugeneYoung的博客
04-21 452
说起PathMeasure这Api可能对于大多数刚入门Android不久的开发者来说有点陌生，但是PathMeasure在我们的view中也是有着很重要的地位，他对于贝塞尔曲线(path)的测量有至关重要的作用，下面我们就来讲解下PathMeasure常用的api以及它在path中的作用： PathMeasure类中持有Path对象的引用，在利用pathMesure对path进行相...
高级-UI-从零到整--(六)-PathMeasure-制作路径动画
最新发布
jiameih的博客
04-08 822
/1.空参//2.path 代表一个已经完成的 Path,forceClosed 代表是否最后闭合函数的使用非常广泛，其作用就是获取计算的路径长度，下面以一个例子来看下它的用法。效果:代码:/**mPathMeasurelengthprintlnforceClosedtruepathLength输出:可以看见，如果 forceClosed 设置为 true/false 测量的是各自的 path。
仿支付宝支付成功打勾动画（关于PathMeasure你该知道的东西）
linshijun33的专栏
09-11 5150
沿预定路径动画图像（无论是直线或曲线）是做动画时一种常见的情况。传统方法是寻找path的函数（贝塞尔函数用的比较多），带入x的值来计算y的值， 然后使用坐标(x,y)来完成动画。 现在还有一种更简单的方法：通过使用path和pathmeasure来完成。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值