Android自定义控件(二)——支付宝支付成功动画

最新推荐文章于 2021-07-22 17:45:37 发布

李元静

最新推荐文章于 2021-07-22 17:45:37 发布

阅读量2.4w

点赞数 6

分类专栏： android Android自定义控件文章标签： Android View 自定义View 属性动画 PathMeasure

本文链接：https://blog.csdn.net/liyuanjinglyj/article/details/102960035

版权

本文介绍了如何实现支付宝支付成功时的动画效果，通过自定义View结合属性动画和PathMeasure来绘制圆及对勾的动画过程。分析了动画的原理，并提供了自定义View的构造、成员变量初始化、onDraw()方法的详细绘制步骤，最后给出了XML布局的使用示例。

摘要由CSDN通过智能技术生成

读律看书三九年，乌纱头上有青天，男儿欲画凌烟阁，第一功名不爱钱。

不知道大家关注过没有，在你使用支付宝的过程中，有一个支付成功的动画，虽然说很小，但看起来其实还是蛮实用的，涉及的知识点有Android属性动画，Paint的getSegment()函数。

1.分析动画

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

假设圆的半径为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）。