Android欢迎界面圆点切换粘连特效

需求效果图

需要开发一个动画特效，欢迎界面切换时，底部的指示点需要有移动粘连的效果。由于对粘连特效感兴趣，所以决定自己动手来实现。
先来看一下效果图（不是动图）：

功能分析

• 自定义View：实现整体的动画效果，使用Canvas绘制
• 粘连特效：使用Path路径绘制

具体实现

自定义View

自定义View，大家应该非常熟悉，这理解不做介绍了。以下代码是主要使用的方法：

public class MyView extends View {
   

    public MyView(Context context) {
        super(context);
    }

    public MyView(Context context,  AttributeSet attrs) {
        super(context, attrs);        
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

}

粘连特效

粘连特效的实现，主要就是贝塞尔曲线的绘制。

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。百度百科

贝塞尔曲线分为二阶，三阶。现在只需要实现二阶曲线就好。
在Android中，二阶贝塞尔曲线的实现利用的是Path类的quadTo方法。

void    quadTo(float x1, float y1, float x2, float y2)
        Add a quadratic bezier from the last point, approaching control point (x1,y1), and ending at (x2,y2).

就是说(x1,y1)是贝塞尔曲线的控制点，（x2,y2）是结束点。

绘制贝塞尔曲线

绘制贝塞尔曲线至少需要起点，控制点，结束点三个点位。
对上图来说，我们只需要得到P1，P5，P4三个点的坐标，或者得到P2，P5，P3三个点的坐标，就能绘制出一条贝塞尔曲线。
我们可以利用Path类绘制一个闭合的路径图，所以我们还需要把P1，P2连接起来，把P3，P4连接起来。

求点的坐标

求点的坐标之前，我们是知道两个圆的圆心坐标以及圆的半径大小。
所以利用三角函数可以得出五个点位的坐标，代码如下：

private void Calculation(float pax, float pay, float pbx,