返回首页
当前位置: 主页 > 网络编程 > Android教程 >

Android开发实战—支付宝支付成功动画

时间:2019-11-22 08:49来源:知行网www.zhixing123.cn 编辑:麦田守望者

对于常常使用支付宝的同学来说,对支付成功的动画应该是在熟悉不过了,这个动画虽然说很小,但看起来其实还是蛮实用的,涉及的知识点有Android属性动画,Paint的getSegment()函数。

首先,我们来分析一下这个动画,我们可以看到,先是圆自己运行闭合,然后在在圆的里面画一个✔,对于圆的部分来说,很简单,无外乎定位圆心与半径就行,难点在于✔的设计,所以我们先用一张图来分析一下,如下图所示:

 

假设圆的半径为mRadius,圆心O坐标为(X,Y),我们把对勾的起点放在A点,假设A的坐标为在圆心平行线中间,那么A的坐标就是(X-mRadius/2,Y),同理,我们假设B的坐标也在圆心垂直线下中心,那么B的坐标为(X,Y+mRadius/2),因为在屏幕中,原点在屏幕的右上角,正方向X轴向右,正方向Y轴向下,所以这里是加,同理,C点肯定要接近圆的边缘,所以C的X轴肯定大于mRadius的一半,姑且我们这里设为X+mRadius/2,而Y也相对来说在上边,而Y不能超出圆外,所以我们根据cX = x + r * cos(a * π / 180);cY = y + r * sin(a * π / 180),计算出该X坐标在圆圈的坐标,小于这个坐标的Y轴设置就行,这里C点设置为(x+mRadius/2,Y-mRadius/3)。

在分析完其中的原理之后,我们便可以动手操作了,可以通过自定义View,来实现支付宝支付成功的动画了,首先,老样子与刮一刮类似,在Android Studio中间创建一个类继承View,实现如下三个构造函数:

1.public class AlipayView extends View {

2.    public AlipayView(Context context) {

3.        super(context);

4.    }

5. 

6.    public AlipayView(Context context, @Nullable AttributeSet attrs) {

7.        super(context, attrs);

8.    }

9. 

10.    public AlipayView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

11.        super(context, attrs, defStyleAttr);

12.    }

13.}

 接着我们定义成员变量,如下图所示:

1.private Paint paint;//画笔工具

2.private Path circlePath,dstPath;//圆路径,截取路径

3.private PathMeasure pathMeasure;//计算路径的参数

4.private float mCurrentValue;//动画执行的进度

5.private int X,Y,mRadius;//圆心坐标与半径

这里,我们定义了一个画笔工具,两个路径,以及计算路径个参数的计算器类,以及动画执行的进度,所有用到的成员变量都在这里,接着就是初始化我们的AlipayView。如下:

1.public AlipayView(Context context, @Nullable AttributeSet attrs) {

2.        super(context, attrs);

3.        setLayerType(LAYER_TYPE_SOFTWARE,null);//关闭硬件加速

4.        this.paint=new Paint(Paint.ANTI_ALIAS_FLAG);//初始化画笔,且设置为抗锯齿

5.        this.paint.setStrokeWidth(4);//设置画笔宽度

6.        this.paint.setStyle(Paint.Style.STROKE);//设置描边

7.        this.dstPath=new Path();//初始化

8.        this.circlePath=new Path();//初始化

9.        this.circlePath.addCircle(X,Y,mRadius,Path.Direction.CW);//顺时针画圆

10.        //下面三行代码画的是勾的路径,对照上面分析图

11.        this.circlePath.moveTo(X-mRadius/2,Y);

12.        this.circlePath.lineTo(X,Y+mRadius/2);

13.        this.circlePath.lineTo(X+mRadius/2,Y-mRadius/3);

14.        this.pathMeasure=new PathMeasure(this.circlePath,false);//不闭合

15. 

16.        ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,2);//这里分两段动画,一段画圆,一段画勾

17.        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

18.            @Override

19.            public void onAnimationUpdate(ValueAnimator animation) {

20.                mCurrentValue=(float)animation.getAnimatedValue();//获取动画进度

21.                invalidate();//获取到进度后进行重绘,会调用onDraw(Canvas canvas)

22.            }

23.        });

24.        valueAnimator.setDuration(4000);//每次动画时间

25.        valueAnimator.start();//执行动画

26.    }

这里我们初始化View主要做了三件事,第一初始化各个成员变量,将圆的路径与勾的路径初始化,但并没有绘制,绘制都在onDraw(Canvas canvas)函数里面,第二,初始化动画的参数,第三,获取路径的计算器,计算器包含路径的一些信息(pathMeasure)。

初始化各个成员变量以及动画参数后,我们就要将它绘制到屏幕上去,而自定义View绘制函数是onDraw(Canvas),代码如下:

1private boolean mNext=false;//判断是否指闭合

2    @Override

3.    protected void onDraw(Canvas canvas) {

4.        super.onDraw(canvas);

5.        canvas.drawColor(Color.WHITE);//首先绘制背景色为白色

6.        if(this.mCurrentValue<1){

7.            //初始化函数中说过,mCurrentValue是记录动画的进度的,而小编将动画进度设置为2,(0,1)就是画圆圈,(1,2)就是画对勾

8.            //而且mCurrentValue的进度是随机的,并不一定获取到1,所以别拿等等与1来计算,只要大于1就执行画对勾就行

9.            float stop=this.pathMeasure.getLength()*this.mCurrentValue;//计算当前进度下路径的百分比,比如,0.25画到圆的4分之一,那么整个圆绘画进度长度就在这里计算得到。

10.            //前面说过dstPath是截取路径,比如一张图片长200,我截取一半就有100,同样通过pathMeasure.getSegment就可以截取circlePath的当前进度路径。

11.            this.pathMeasure.getSegment(0,stop,dstPath,true);

12.        }else{

13.            if(!mNext){

14.                this.mNext=true;

15.                //刚说过了,动画的进度值并不一定会获取到1,有可能直接从0.99跳到1.01,那么没绘制完成的部分,就需要绘制先绘制完成

16.                this.pathMeasure.getSegment(0,this.pathMeasure.getLength(),dstPath,true);

17.                this.pathMeasure.nextContour();//因为圆与对勾并没有闭合,所以算两个路径,这句代码就是切换到对勾路径上

18.            }

19.            float stop=this.pathMeasure.getLength()*(this.mCurrentValue-1);//每条进度都是按1算百分比的, 但动画设置的是2,所以减去圆的1,单独计算勾的路径百分比

20.            this.pathMeasure.getSegment(0,stop,dstPath,true);

21.        }

22.        canvas.drawPath(dstPath,paint);//把截取到的路径画出来

23.    }

 

这段首先绘制自定义控件的背景为白色,然后判断动画的进度,如果小于1,执行圆的生成动画,通过PathMeasure.getSegment将截取的路径存储到dstPath中,而当动画进度不小于1的时候, 因为动画的插值器并不一定会获取到1这个值,所以接下来首先做的就是先闭合这个圆,然后通过next.Contour()切换到勾的路径,在根据动画的值绘制勾出来,最后调用canvas将截取的路径画到自定义View上面,也就是屏幕上。

 

当然,仅仅这样还是不够的,因为X,Y,mRaduis,都没有赋值,所以根据自己的需求调整大小,或者设置一个函数,让外部调用设置灵活的X,Y,半径都行,代码如下:

private int X=500,Y=500,mRadius=250;//圆心坐标

XML布局文件代码如下:

1.<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

2.    xmlns:tools="http://schemas.android.com/tools"

3.    android:layout_width="match_parent"

4.    android:layout_height="match_parent"

5.    tools:context=".MainActivity">

6. 

7.    <com.liyuanjinglyj.alipayapplication.AlipayView

8.        android:layout_width="match_parent"

9.        android:layout_height="match_parent"/>

10. 

 

11.</androidx.constraintlayout.widget.ConstraintLayout>

 

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • Android手机系统故障排除大全?

    在Android手机的使用过程中,难免遇到各种各样的奇怪问题,比如应用闪退、无辜卡顿、...

  • 手机端OCR识别软件(IOS/Android)使用图解教程

    为大家带来一款手机端OCR识别软件,轻松把图片上的文字转换成可编辑的文档。 接下来出...

  • 电脑怎么发短信到手机?电脑发短信到手机的操作技巧

    我们有时候工作中,常常会遇到短信群发的情况,可是一条一条的发,很繁琐,也很不方便...

  • 手机如何控制电脑?手机控制电脑软件哪个好用

    很多网友们可能因为工作需要的原因,要远程控制自己的电脑或者其他的移动设备,这个时...

  • 安卓手机怎么连接电脑?安卓手机连接电脑的方法

    有些安卓的手机用户们在使用电脑的过程中,下载软件,往电脑上传照片视频时还是不会,...

  • 三星手机连接电脑的操作方法图解教程

    如果想要将手机里的多媒体文件导出到电脑,或者将电脑中的文件导入到手机。那么,通过...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8娱乐官网手机版
  • Photoshop龙8娱乐官网手机版
  • 3DMAX龙8娱乐官网手机版
  • AutoCAD龙8娱乐官网手机版
  • CorelDRAW龙8娱乐官网手机版
  • Matlab龙8娱乐官网手机版
  • 其他龙8娱乐官网手机版
  • .Net龙8娱乐官网手机版
  • Asp龙8娱乐官网手机版
  • Php龙8娱乐官网手机版
  • Jsp龙8娱乐官网手机版
  • Ajax龙8娱乐官网手机版
  • Android教程
  • 其他龙8娱乐官网手机版
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影