贝赛尔曲线初步（二） - 仿 QQ 未读消息气泡

转载请注明出处　blog.csdn.net/qq_31715429…
本文出自：猴菇先生的博客

上一节初步了解了Android端的贝塞尔曲线，这一节就举个栗子练习一下，仿QQ未读消息气泡，是最经典的练习贝塞尔曲线的东东，效果如下

大体思路就是画两个圆，一个黏连小球固定在一个点上，一个气泡小球跟随手指的滑动改变坐标。随着两个圆间距越来越大，黏连小球半径越来越小。当间距小于一定值，松开手指气泡小球会恢复原来位置；当间距超过一定值之后，黏连小球消失，气泡小球继续跟随手指移动，此时手指松开，气泡小球消失~

1、首先老一套~新建attrs.xml文件，编写自定义属性，新建DragBubbleView继承View，重写构造方法，获取自定义属性值，初始化Paint、Path等东东，重写onMeasure计算宽高，这里不再啰嗦~

2、在onSizeChanged方法中确定黏连小球和气泡小球的圆心坐标，这里我们取宽高的一半：

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBubbleCenterX = w / 2;
        mBubbleCenterY = h / 2;
        mCircleCenterX = mBubbleCenterX;
        mCircleCenterY = mBubbleCenterY;
    }

3、经分析气泡小球有以下几个状态：默认、拖拽、移动、消失，我们这里定义一下，方便根据不同的状态分析不同情况：

    /* 气泡的状态 */
    private int mState;
    /* 默认，无法拖拽 */
    private static final int STATE_DEFAULT = 0x00;
    /* 拖拽 */
    private static final int STATE_DRAG = 0x01;
    /* 移动 */
    private static final int STATE_MOVE = 0x02;
    /* 消失 */
    private static final int STATE_DISMISS = 0x03;

4、重写onTouchEvent方法，其中d代表两圆圆心间距，maxD代表可拖拽的最大间距：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (mState != STATE_DISMISS) {
                    d = (float) Math.hypot(event.getX() - mBubbleCenterX, event.getY() - mBubbleCenterY);
                    if (d < mBubbleRadius + 48) {
                        //当指尖坐标在圆内的时候，才认为是可拖拽的
                        //一般气泡比较小，增加48像素是为了更轻松的拖拽
                        mState = STATE_DRAG;
                    } else {
                        mState = STATE_DEFAULT;
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (mState != STATE_DEFAULT) {
                    mBubbleCenterX = event.getX();
                    mBubbleCenterY = event.getY();
                    //计算气泡圆心与黏连小球圆心的间距
                    d = (float) Math.hypot(mBubbleCenterX - mCircleCenterX, mBubbleCenterY - mCircleCenterY);
                    //float d = (float) Math.sqrt(Math.pow(mBubbleCenterX - mCircleCenterX, 2) 
                    + Math.pow(mBubbleCenterY - mCircleCenterY, 2));
                    if (mState == STATE_DRAG) {//如果可拖拽
                        //间距小于可黏连的最大距离
                        if (d < maxD - 48) {// 减48像素是为了让黏连小球半径到一个较小值快消失时直接消失
                            mCircleRadius = mBubbleRadius - d / 5;//使黏连小球半径渐渐变小
                            mOnBubbleStateListener.onDrag();
                        } else {//间距大于于可黏连的最大距离
                            mState = STATE_MOVE;//改为移动状态
                            mOnBubbleStateListener.onMove();
                        }
                    }
                    invalidate();
                }
                break;
            case MotionEvent.ACTION_UP:
                if (mState == STATE_DRAG) {//正在拖拽时松开手指，气泡恢复原来位置并颤动一下
                    setBubbleRestoreAnim();
                } else if (mState == STATE_MOVE) {//正在移动时松开手指，气泡消失
                    setBubbleDismissAnim();
                }
                break;
        }
        return true;
    }

5、在onDraw方法中画圆、画贝赛尔曲线、画消息个数文本：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画拖拽气泡
        canvas.drawCircle(mBubbleCenterX, mBubbleCenterY, mBubbleRadius, mBubblePaint);

        if (mState == STATE_DRAG && d < maxD - 48) {
            //画黏连小圆
            canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mBubblePaint);
            //计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标
            calculateBezierCoordinate();
            //画二阶贝赛尔曲线
            mBezierPath.reset();
            mBezierPath.moveTo(mCircleStartX, mCircleStartY);
            mBezierPath.quadTo(mControlX, mControlY, mBubbleEndX, mBubbleEndY);
            mBezierPath.lineTo(mBubbleStartX, mBubbleStartY);
            mBezierPath.quadTo(mControlX, mControlY, mCircleEndX, mCircleEndY);
            mBezierPath.close();
            canvas.drawPath(mBezierPath, mBubblePaint);
        }
        //画消息个数的文本
        if (mState != STATE_DISMISS && !TextUtils.isEmpty(mText)) {
            mTextPaint.getTextBounds(mText, 0, mText.length(), mTextRect);
            canvas.drawText(mText, mBubbleCenterX - mTextRect.width() / 2, mBubbleCenterY + mTextRect.height() / 2, mTextPaint);
        }
    }

其中计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标，顺序是moveTo A, quadTo B, lineTo C, quadTo D, close
先来张示意图：

再上代码

/**
 * 计算二阶贝塞尔曲线做需要的起点、终点和控制点坐标
 */
private void calculateBezierCoordinate(){
    //计算控制点坐标，为两圆圆心连线的中点
    mControlX = (mBubbleCenterX + mCircleCenterX) / 2;
    mControlY = (mBubbleCenterY + mCircleCenterY) / 2;
    //计算两条二阶贝塞尔曲线的起点和终点
    float sin = (mBubbleCenterY - mCircleCenterY) / d;
    float cos = (mBubbleCenterX - mCircleCenterX) / d;
    mCircleStartX = mCircleCenterX - mCircleRadius * sin;
    mCircleStartY = mCircleCenterY + mCircleRadius * cos;
    mBubbleEndX = mBubbleCenterX - mBubbleRadius * sin;
    mBubbleEndY = mBubbleCenterY + mBubbleRadius * cos;
    mBubbleStartX = mBubbleCenterX + mBubbleRadius * sin;
    mBubbleStartY = mBubbleCenterY - mBubbleRadius * cos;
    mCircleEndX = mCircleCenterX + mCircleRadius * sin;
    mCircleEndY = mCircleCenterY - mCircleRadius * cos;
}

6、最后是气泡复原和消失的动画

    /**
     * 设置气泡复原的动画
     */
    private void setBubbleRestoreAnim() {
        ValueAnimator animX = ValueAnimator.ofFloat(mBubbleCenterX, mCircleCenterX);
        animX.setDuration(200);
        //使用OvershootInterpolator差值器达到颤动效果
        animX.setInterpolator(new OvershootInterpolator(4));
        animX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBubbleCenterX = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animX.start();
        ValueAnimator animY = ValueAnimator.ofFloat(mBubbleCenterY, mCircleCenterY);
        animY.setDuration(200);
        animY.setInterpolator(new OvershootInterpolator(4));
        animY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBubbleCenterY = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animY.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //动画结束后状态改为默认
                mState = STATE_DEFAULT;
                mOnBubbleStateListener.onRestore();
            }
        });
        animY.start();
    }

    /**
     * 设置气泡消失的动画
     */
    private void setBubbleDismissAnim() {
        ValueAnimator anim = ValueAnimator.ofFloat(mBubbleRadius, 0);
        anim.setDuration(200);
        anim.setInterpolator(new AnticipateOvershootInterpolator(3));
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBubbleRadius = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mState = STATE_DISMISS;//气泡改为消失状态
                mOnBubbleStateListener.onDismiss();
            }
        });
        anim.start();
    }

7、顺便来个气泡状态的监听器，方便外部调用监听其状态：

    /**
     * 气泡状态的监听器
     */
    public interface OnBubbleStateListener {
        /**
         * 拖拽气泡
         */
        void onDrag();

        /**
         * 移动气泡
         */
        void onMove();

        /**
         * 气泡恢复原来位置
         */
        void onRestore();

        /**
         * 气泡消失
         */
        void onDismiss();
    }

    /**
     * 设置气泡状态的监听器
     */
    public void setOnBubbleStateListener(OnBubbleStateListener onBubbleStateListener) {
        mOnBubbleStateListener = onBubbleStateListener;
    }

8、在布局文件中使用该控件，并使用自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:monkey="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.monkey.dragpopview.DragBubbleView
        android:id="@+id/dragBubbleView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        monkey:text="99+" />

</RelativeLayout>

9、在MainActivity中：

    DragBubbleView dragBubbleView = (DragBubbleView) findViewById(R.id.dragBubbleView);
    dragBubbleView.setOnBubbleStateListener(new DragBubbleView.OnBubbleStateListener() {
        @Override
        public void onDrag() {
            Log.e("---> ", "拖拽气泡");
        }

        @Override
        public void onMove() {
            Log.e("---> ", "移动气泡");
        }

        @Override
        public void onRestore() {
            Log.e("---> ", "气泡恢复原来位置");
        }

        @Override
        public void onDismiss() {
            Log.e("---> ", "气泡消失");
        }
    });

总结
这次既练习了自定义View，还囊括了贝赛尔曲线，坐标的计算一定要画图，简单直观。
最后附上源码地址：github.com/MonkeyMushr…