Android使用Path仿支付宝支付成功失败动画

序言:最近空闲的时候一直在学习自定义View的相关知识,这也是LZ最近半年的学习对象,有的时候就是要给本身定下一个小目标,我们没有王老板的先赚他一个亿这么豪气,也得先有个目标不是。逛博客的时候看到支付宝支付成功失败的动画效果,恰好最近在学习Path的相关知识,就想着实践一下,也巩固一下本身所学的知识,话很少说直接上图。

这个也是公司项目中须要的,以前因为项目紧,直接让UI切了个图,就这样上了,这不太符合个人一向做风,可是没办法>_<

首先咱们来分解一下这个动做,首先是一段progressDialog,能够看作是在请求数据等待过程,而后成功以后显示成功的动画,失败以后显示失败的动画,那么这里涉及到三个状态,加载中、加载成功和加载失败,这里咱们使用枚举来实现这三种状态。首先呢,咱们先来实现这个等待的进度条:

一、画一个圆,确切的来讲是画一段圆弧,而后旋转画布,在此过程当中不断修改圆弧的大小,形成一个这样动态的假象:git

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.translate(getPaddingLeft(), getPaddingTop());   //将当前画布的点移到getPaddingLeft,getPaddingTop,后面的操做都以该点做为参照点
    if (mStatus == StatusEnum.Loading) {    //正在加载
        if (startAngle == minAngle) {
            sweepAngle += 6;
        }
        if (sweepAngle >= 300 || startAngle > minAngle) {
            startAngle += 6;
            if (sweepAngle > 20) {
                sweepAngle -= 6;
            }
        }
        if (startAngle > minAngle + 300) {
            startAngle %= 360;
            minAngle = startAngle;
            sweepAngle = 20;
        }
        canvas.rotate(curAngle += 4, progressRadius, progressRadius);  //旋转的弧长为4
        canvas.drawArc(new RectF(0, 0, progressRadius * 2, progressRadius * 2), startAngle, sweepAngle, false, mPaint);
        invalidate();
    }
}复制代码

这里startAngle表示圆弧的起始角度,sweepAngle表示圆弧扫过的角度,minAngle是一个过渡值,是为了帮助startAngle改变值而用到的。这里用到了画弧度的方法,在上一篇博客中我有细讲这个方法,若是你还不知道的话请移步Android自定义view之圆形进度条,这里还用到了rotate方法,来看一下它的源码解释:github

/**
 * Preconcat the current matrix with the specified rotation.
 *
 * @param degrees The amount to rotate, in degrees
 * @param px The x-coord for the pivot point (unchanged by the rotation)
 * @param py The y-coord for the pivot point (unchanged by the rotation)
 */
public final void rotate(float degrees, float px, float py) {
    translate(px, py);
    rotate(degrees);
    translate(-px, -py);
}复制代码

这个方法主要是将画布进行旋转,咱们能够看到,先是将画布平移到某个点,而后再旋转某个角度,最后再平移回去,这样作的目的是为了让须要旋转的View进行中心对称旋转,因此后面传的PX,PY值须要是View宽高的一半,不信的话你能够去作个实验;说了这么多咱们直接来看一下效果:canvas

二、画成功状态的动画,这部分也能够分红两个小部分,先是画一个圆,而后再画中间的钩:
(1)、画圆:上一篇博客中讲了经过进度来画弧进而来画整个圆,今天咱们的主角是Path,因此咱们使用Path来实现这样一个效果,仍是先上代码,经过代码来说解:bash

//追踪Path的坐标
private PathMeasure mPathMeasure;
//画圆的Path
private Path mPathCircle;
//截取PathMeasure中的path
private Path mPathCircleDst;

mPaint.setColor(loadSuccessColor);
mPathCircle.addCircle(getWidth() / 2, getWidth() / 2, progressRadius, Path.Direction.CW);
mPathMeasure.setPath(mPathCircle, false);
mPathMeasure.getSegment(0, circleValue * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);复制代码

Path的经常使用方法有,add一条路径(任意形状,任意线条),这里咱们在path中添加了一个圆的路径,具体Path常见的用法以下表所示:eclipse

Path的常见方法 方法含义
moveTo() 该方法移动后续操做的起点坐标
lineTo() 该方法是链接起始点与某一点(传的参数)造成一条线
setLastPath() 该方法是设置Path最后的坐标
close() 该方法是将起点坐标与终点坐标链接起来造成一个闭合的图形(若是始终点左边能链接的话)
addRect() 该方法是绘制一个巨型
addRoundRect() 该方法是绘制一个圆角矩形
addOval() 该方法是绘制一个椭圆
arcTo() 该方法是绘制一段圆弧
addArc() 该方法是绘制一段圆弧

而后呢,这里有一个PathMeasure,简单点说,这玩意就是用来实现Path坐标点的追踪,你也能够认为是Path坐标的计算器,具体PathMeasure的常见的用法以下表所示:ide

PathMeasure的常见方法 方法含义
setPath() 该方法将path与PathMeasure绑定起来
getLength() 该方法用于得到path路径的长度
getSegment() 该方法用于截取整个Path的片断
nextContour() 该方法用于切换到下一个路径

这里咱们经过动画从0——1之间的变化,来改变所画圆的弧度:学习

circleAnimator = ValueAnimator.ofFloat(0, 1);
circleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        circleValue = (float) animation.getAnimatedValue();
        invalidate();
    }
});复制代码

(2)、接下来画完圆以后,咱们要开始画对钩了:动画

对钩
对钩

if (circleValue == 1) {      //表示圆画完了,能够钩了
    successPath.moveTo(getWidth() / 1 * 3, getWidth() / 2);
    successPath.lineTo(getWidth() / 2, getWidth() / 5 * 3);
    successPath.lineTo(getWidth() / 3 * 2, getWidth() / 5 * 2);
    mPathMeasure.nextContour();
    mPathMeasure.setPath(successPath, false);
    mPathMeasure.getSegment(0, successValue * mPathMeasure.getLength(), mPathCircleDst, true);
    canvas.drawPath(mPathCircleDst, mPaint);
}复制代码

这里的坐标我是根据UI给的图大体算出来的,能够参考下面这张图的虚线和实现,对钩的起始坐标在坐标轴中大体是getWidth() / 8 * 3,你也能够根据你的需求来画出这个对钩,其实就是两段路径,分别用pathlineTo方法来实现:ui

成功画对勾
成功画对勾

同理,画叉叉也是同样的,只要你算出叉在坐标轴中的坐标就ok了,这里我也给出一张参考图:spa

叉叉
叉叉

mPaint.setColor(loadFailureColor);
mPathCircle.addCircle(getWidth() / 2, getWidth() / 2, progressRadius, Path.Direction.CW);
mPathMeasure.setPath(mPathCircle, false);
mPathMeasure.getSegment(0, circleValue * mPathMeasure.getLength(), mPathCircleDst, true);
canvas.drawPath(mPathCircleDst, mPaint);

if (circleValue == 1) {  //表示圆画完了,能够画叉叉的右边部分
    failurePathRight.moveTo(getWidth() / 3 * 2, getWidth() / 3);
    failurePathRight.lineTo(getWidth() / 3, getWidth() / 3 * 2);
    mPathMeasure.nextContour();
    mPathMeasure.setPath(failurePathRight, false);
    mPathMeasure.getSegment(0, failValueRight * mPathMeasure.getLength(), mPathCircleDst, true);
    canvas.drawPath(mPathCircleDst, mPaint);
}

if (failValueRight == 1) {    //表示叉叉的右边部分画完了,能够画叉叉的左边部分
    failurePathLeft.moveTo(getWidth() / 3, getWidth() / 3);
    failurePathLeft.lineTo(getWidth() / 3 * 2, getWidth() / 3 * 2);
    mPathMeasure.nextContour();
    mPathMeasure.setPath(failurePathLeft, false);
    mPathMeasure.getSegment(0, failValueLeft * mPathMeasure.getLength(), mPathCircleDst, true);
    canvas.drawPath(mPathCircleDst, mPaint);
}复制代码

失败画叉叉
失败画叉叉

参考:

Android自定义之仿支付宝支付成功、失败状态的加载进度

自定义View(三)使用Path仿支付宝支付成功效果

PathMeasure之迷径追踪

到此就完成了自定义的原型进度条了。源码已上传至Github,有须要的同窗能够下载下来看看,欢迎Star,Fork

同时感谢以上引用到博客的主人,感谢!!!

公众号:Android技术经验分享
公众号:Android技术经验分享
相关文章
相关标签/搜索