仿带有粘性的圆形刷新控件(1)

实现效果：

实现过程：
首先是图形的绘制实现：
采用两个圆，一个是在原地不动的起始圆S，一个是被拉伸出去的圆E，并用两条贝塞尔曲线接合，然后填充。
具体的图形就像下图，为了跟好的切合，选取了图一的方案，两条贝塞尔曲线的控制点选取O和P

为了绘制贝塞尔曲线，我们需要获取A,B,D,C,O,P这6个点的坐标。而我们已知圆S和E的圆心坐标和半径
可根据两圆心的距离和圆心坐标求出角R2R1X的cos和sin值。然后再加上两个圆的半径就可以求出A、B、C、D的坐标。O和P的坐标可以根据上面四个起点的坐标加上圆心距离和cos和sin就可以求出。具体计算代码如下：

private boolean calculateBezierCurve(Circle circleStart, Circle circleEnd){
        float startRadius = circleStart.radius;
        float endRadius = circleEnd.radius;
        float startX = circleStart.centerPoint.x;
        float startY = circleStart.centerPoint.y;
        float endX= circleEnd.centerPoint.x;
        float endY = circleEnd.centerPoint.y;

        float mCircleDistance = getDistanceBetweenTwoPoints(startX,startY,endX,endY);
        //两个圆重合就无需要绘制连接曲线
        if(mCircleDistance == 0){
            return false;
        }

        float cos = (startX - endX)/mCircleDistance;
        float sin = (startY - endY)/mCircleDistance;

        float ax = startX - startRadius * sin;
        float ay = startY + startRadius * cos;
        pStartA.x = ax;
        pStartA.y = ay;

        float bx = startX + startRadius * sin;
        float by = startY - startRadius * cos;
        pStartB.x = bx;
        pStartB.y = by;

        float cx = endX - endRadius * sin;
        float cy = endY + endRadius * cos;
        pEndA.x = cx;
        pEndA.y = cy;

        float dx = endX + endRadius * sin;
        float dy = endY - endRadius * cos;
        pEndB.x = dx;
        pEndB.y = dy;

        float ox = cx + mCircleDistance /2 * cos;
        float oy = cy + mCircleDistance /2 * sin;
        pControlO.x = ox;
        pControlO.y = oy;

        float px = dx + mCircleDistance /2 * cos;
        float py = dy + mCircleDistance /2 * sin;
        pControlP.x = px;
        pControlP.y = py;

        return true;
    }

需要计算的还有两个圆的随手指移动，圆心坐标和半径的变化:downPoint和movePoint分别是手指第一次按下的点和随后滑动手指所在的点

private void calculateCircleSize(){
        float mMoveDistance = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
        //两圆重合无需再计算
        if(mMoveDistance <= 0) return;
        mScale = mMoveDistance/MaxMoveDistance;
        //开始圆按比例缩小
        circleStart.radius = DEFAULT_RADIUS * (1- mScale);
        //拉出圆按比例放大
        circleEnd.radius = DEFAULT_RADIUS * mScale;

        //开始圆的位置不变，拉出圆的位置根据滑动的距离移动
        circleEnd.centerPoint.x = circleStart.centerPoint.x + movePoint.x - downPoint.x;
        circleEnd.centerPoint.y = circleStart.centerPoint.y + movePoint.y - downPoint.y;
    }

经过适当的计算后，就是绘制图形：

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //关闭硬件加速，否则部分path的绘制不生效
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);

        //根据按下的和滑动的点两个点的距离计算，开始圆和拉出圆的中心坐标以及半径
        calculateCircleSize();
        canvas.drawCircle(circleStart.centerPoint.x, circleStart.centerPoint.y, circleStart.radius, mBezierPaint);
        canvas.drawCircle(circleEnd.centerPoint.x, circleEnd.centerPoint.y, circleEnd.radius, mBezierPaint);

        if(calculateBezierCurve(circleStart,circleEnd)){
            drawBezierCurves(canvas);//绘制两圆间的贝塞尔曲线
        }
        
        if(loadAnimator.isRunning()){
            drawLoading(canvas);//绘制旋转时，中心的圆弧
        }else {
            drawLoadingNormal(canvas);//绘制中心的圆弧和箭头
        }
    }

然后就是中心圆弧的绘制，因为在加载时和在拖拉时图形不同，就区分开来绘制

在拖拉时，中心是一段圆弧加上一个小箭头。绘制原理大概是在初始化的时候预先创建了一段接近360度的圆圈,因为直接360度的时候后续用PathMeasure测量长度可能不准

        mLoadPath = new Path();
        float loadCircleRadius = DEFAULT_RADIUS - DEFAULT_PADDING;
        RectF circle = new RectF(-loadCircleRadius, -loadCircleRadius, loadCircleRadius, loadCircleRadius);
        mLoadPath.addArc(circle, 0, 359.9f);

用PathMeasure获取之前创建圆圈Path的长度，选取圆圈上开始的长度start为0，就是圆圈开始的地方，再选取截取的长度stop为3/4的圆长。并且截取这段圆弧。这样中心的圆弧就有了。

同时，用PathMeasure获取截点stop的坐标以及正切角，用新建的path画一个小箭头，箭头的顶点在stop的坐标上。再根据正切角获取箭头需要旋转的角度。具体代码如下：

 private void drawLoadingNormal(Canvas canvas){
        //这里包含对画布坐标系的转换，快照一下，防止影响后续绘制
        canvas.save();
        //将画布中心移到开始圆的中心
        canvas.translate(circleStart.centerPoint.x,circleStart.centerPoint.y);
        //根据移动的距离比例，对画布缩小和旋转
        canvas.scale(1 - mScale,1 - mScale);
        canvas.rotate(360 * mScale);

        pathMeasure.setPath(mLoadPath,false);//将中心圆圈的path和pathMeasure关联
        float[] pos = new float[2];
        float[] tan = new float[2];
        float stop = pathMeasure.getLength() * 0.75f;
        float start = 0;
        pathMeasure.getPosTan(stop,pos,tan);//获取截取圆弧的结束点的坐标和方向趋势
        //根据tan获取旋转的角度，用于旋转后面绘制的箭头
        float degrees =(float)(Math.atan2(tan[1],tan[0])*180/Math.PI);

        Matrix matrix = new Matrix();
        Path triangle = new Path();
        //绘制箭头，此时的箭头的顶点坐标还在原点
        triangle.moveTo(pos[0] - 5, pos[1] + 5);
        triangle.lineTo(pos[0],pos[1]);
        triangle.lineTo(pos[0] + 5, pos[1] + 5);
        triangle.close();
        //将箭头移动到圆弧结束点的位置并旋转
        matrix.setRotate(degrees+90, pos[0],pos[1]);

        Path showPath = new Path();
        //前面的箭头添加将要绘制的路径里面
        showPath.addPath(triangle,matrix);
        //截取圆圈从起始点到结束的圆弧并添加到要绘制的path中，true代表不将截取的圆弧的起点移动到之前path的最后一个点上
        pathMeasure.getSegment(start,stop,showPath,true);

        canvas.drawPath(showPath, mLoadPaint);
        canvas.restore();
    }

绘制加载时候的圆弧同理，只是少画了箭头，同时start和stop的位置根据animator给与的value来选取，这里的value的值由0慢慢变化到1

private void drawLoading(Canvas canvas){
        //基本和绘制一般状态的时候一样，除了截取的起点和终点需要动态的计算
        canvas.save();
        canvas.translate(circleStart.centerPoint.x, circleStart.centerPoint.y);
        canvas.scale(1 - mScale,1 - mScale);
        pathMeasure.setPath(mLoadPath,false);
        Path newPath = new Path();
        float stop = pathMeasure.getLength() * mLoadAnimatorValue;
        float start = (float)(stop - (0.5 - Math.abs(mLoadAnimatorValue - 0.5)) * 200f);
        pathMeasure.getSegment(start,stop,newPath,true);
        canvas.drawPath(newPath, mLoadPaint);
        canvas.restore();
    }

手指状态获取的代码如下：

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        //动画执行时，无需改变两点的坐标
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                if(!stickyAnimator.isRunning() && !loadAnimator.isRunning()){
                    downPoint.x = x;
                    downPoint.y = y;
                    movePoint.set(downPoint);
                    resetLoadAnimator();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){
                    movePoint.x = x;
                    movePoint.y = y;
                    float distanceMove = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
                    //滑动距离在动作范围内，则开始执行回滚动画和loading动画
                    if(inLoadArea(distanceMove)){
                        loading = true;
                        executeAnimator(distanceMove);
                    }
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if(!stickyAnimator.isRunning() && !loadAnimator.isRunning() && !loading){
                    movePoint.x = x;
                    movePoint.y = y;
                    float distanceUp = getDistanceBetweenTwoPoints(downPoint.x,downPoint.y,movePoint.x,movePoint.y);
                    //滑动距离在动作范围内，则开始执行回滚动画和loading动画，否则只开始回滚动画
                    if(inLoadArea(distanceUp)){
                       loading = true;
                    }
                    executeAnimator(distanceUp);
                }
                break;
        }
        return true;
    }

动画的内容在下一篇讲
http://www.jianshu.com/p/5d35e37ef02a

项目地址：https://github.com/clam314/StickyCircleView