aa.gif

一鹅士、實(shí)現(xiàn)思路

在列表中默認(rèn)使用自定義的TextView控件來(lái)展示消息氣泡捂敌，在自定義的TextView控件中重寫(xiě)onTouchEvent方法，然后在DOWN艰毒、MOVE筐高、UP事件中分別處理拖拽效果。
整個(gè)拖拽效果我們可以拆分成以下幾步來(lái)實(shí)現(xiàn)：
1.默認(rèn)狀態(tài)
2.兩氣泡相連狀態(tài)
3.兩氣泡分離狀態(tài)
4.氣泡消失狀態(tài)

二丑瞧、功能實(shí)現(xiàn)

默認(rèn)狀態(tài)：用來(lái)做一個(gè)狀態(tài)的標(biāo)識(shí)柑土，無(wú)需特別處理。
兩氣泡相連狀態(tài)：繪制一個(gè)固定圓和一個(gè)移動(dòng)圓绊汹，使用兩條貝塞爾曲線來(lái)實(shí)現(xiàn)兩氣泡連接的曲線稽屏，兩條貝塞爾曲線共用同一個(gè)控制點(diǎn)，然后根據(jù)MOVE事件中的坐標(biāo)不斷重繪移動(dòng)圓灸促。
實(shí)現(xiàn)兩氣泡連接的效果诫欠，需要先計(jì)算出一些點(diǎn)的坐標(biāo)，這也是整個(gè)拖拽氣泡效果的核心部分浴栽，具體如下圖：

思路圖.png

int controlX = (int) ((mBubStillCenter.x + mBubMoveCenter.x) / 2);
int controlY = (int) ((mBubStillCenter.y + mBubMoveCenter.y) / 2);

根據(jù)圖中所標(biāo)注的信息得知，∠a=∠d豆拨，∠b=∠c直奋，∠a=∠θ，由此可知施禾，我們求出∠θ所在的直角三角形的sin和cos值脚线，就可以計(jì)算出A點(diǎn)、B點(diǎn)弥搞、C點(diǎn)邮绿、D點(diǎn)的坐標(biāo)渠旁。
sin值可以通過(guò)移動(dòng)圓的y坐標(biāo)減去固定圓的y坐標(biāo)，再除以兩圓心的距離斯碌，也就是O1到O2的距離一死。
cos值可以通過(guò)移動(dòng)圓的x坐標(biāo)減去固定圓的x坐標(biāo)肛度，再除以兩圓心的距離傻唾。

float sin = (mBubMoveCenter.y - mBubStillCenter.y) / mDist;
float cos = (mBubMoveCenter.x - mBubStillCenter.x) / mDist;

有了sin和cos值，對(duì)應(yīng)的A點(diǎn)承耿、B點(diǎn)冠骄、C點(diǎn)、D點(diǎn)的坐標(biāo)就好計(jì)算了

// A點(diǎn)
float bubbleStillStartX = mBubStillCenter.x + mBubbleStillRadius * sin;
float bubbleStillStartY = mBubStillCenter.y - mBubbleStillRadius * cos;
// B點(diǎn)
float bubbleMoveStartX = mBubMoveCenter.x + mBubbleMoveRadius * sin;
float bubbleMoveStartY = mBubMoveCenter.y - mBubbleMoveRadius * cos;
// C點(diǎn)
float bubbleMoveEndX = mBubMoveCenter.x - mBubbleMoveRadius * sin;
float bubbleMoveEndY = mBubMoveCenter.y + mBubbleMoveRadius * cos;
// D點(diǎn)
float bubbleStillEndX = mBubStillCenter.x - mBubbleStillRadius * sin;
float bubbleStillEndY = mBubStillCenter.y + mBubbleStillRadius * cos;

接下來(lái)就是把這些貝塞爾曲線和直線連起來(lái)加袋，就實(shí)現(xiàn)了兩氣泡相連的效果凛辣。
兩氣泡分離狀態(tài)：當(dāng)拖拽的移動(dòng)圓超出固定圓一定范圍時(shí)，就進(jìn)入了兩氣泡分離狀態(tài)职烧，此時(shí)我們只需要繪制移動(dòng)圓即可扁誓。當(dāng)拖拽的移動(dòng)圓回到固定圓一定范圍時(shí)，此時(shí)會(huì)進(jìn)入兩氣泡相連狀態(tài)蚀之，并且需要實(shí)現(xiàn)一個(gè)氣泡還原的效果蝗敢。（這里會(huì)有個(gè)難點(diǎn)，就是移動(dòng)圓我們可以在屏幕上任意拖動(dòng)而不被遮擋足删，這里放到后面來(lái)實(shí)現(xiàn)寿谴。）

public void move(float curX, float curY) {
    mBubMoveCenter.x = curX;
    mBubMoveCenter.y = curY;
    mDist = (float) Math.hypot(curX - mBubStillCenter.x, curY - mBubStillCenter.y);
    if(mBubbleState == BUBBLE_STATE_CONNECT){
        if(mDist < mMaxDist - MOVE_OFFSET){
            mBubbleStillRadius = mBubbleRadius - mDist / 10;
        }else {
            mBubbleState = BUBBLE_STATE_APART;
        }
    }
    invalidate();
}

mDist就是兩圓心的距離。

/**
 * 氣泡還原動(dòng)畫(huà)
 */
private void startBubbleRestAnim() {
    mBubbleStillRadius = mBubbleRadius;
    ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), new PointF(mBubMoveCenter.x, mBubMoveCenter.y), new PointF(mBubStillCenter.x, mBubStillCenter.y));
    animator.setDuration(200);
    animator.setInterpolator(input -> {
        float factor = 0.4f;
        return (float) (Math.pow(2, -10 * factor) * Math.sin((input - factor / 4) * (2 * Math.PI) / factor) + 1);
    });
    animator.addUpdateListener(animation -> {
        mBubMoveCenter = (PointF) animation.getAnimatedValue();
        invalidate();
    });
    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mBubbleState = BUBBLE_STATE_DEFAULT;
            removeDragView();
            if(mDragListener != null){
                mDragListener.onRestore();
            }
        }
    });
    animator.start();
}

分享一個(gè)可視化插值器的網(wǎng)站失受，其中內(nèi)置了一些插值器公式讶泰，還可以查看動(dòng)畫(huà)演示效果。http://inloop.github.io/interpolator/

氣泡消失狀態(tài)：當(dāng)拖拽的移動(dòng)圓超出一定范圍時(shí)拂到，并且松開(kāi)了手指后痪署，此時(shí)進(jìn)入氣泡消失狀態(tài)，此時(shí)我們需要實(shí)現(xiàn)一個(gè)爆炸的動(dòng)畫(huà)兄旬。
爆炸的動(dòng)畫(huà)通過(guò)繪制一組圖片來(lái)實(shí)現(xiàn)

if(mBubbleState == BUBBLE_STATE_DISMISS){
    if(mIsBurstAnimStart){
        mBurstRect.set((int)(mBubMoveCenter.x - mBubbleMoveRadius), (int)(mBubMoveCenter.y - mBubbleMoveRadius),
                (int)(mBubMoveCenter.x + mBubbleMoveRadius), (int)(mBubMoveCenter.y + mBubbleMoveRadius));
        canvas.drawBitmap(mBurstBitmapArray[mCurDrawableIndex], null, mBurstRect, mBurstPaint);
    }
}

mCurDrawableIndex是圖片的索引狼犯，是通過(guò)屬性動(dòng)畫(huà)來(lái)改變

/**
 * 氣泡爆炸動(dòng)畫(huà)
 */
private void startBubbleBurstAnim() {
    ValueAnimator animator = ValueAnimator.ofInt(0, mBurstDrawablesArray.length);
    animator.setInterpolator(new LinearInterpolator());
    animator.setDuration(1000);
    animator.addUpdateListener(animation -> {
        mCurDrawableIndex = (int) animator.getAnimatedValue();
        invalidate();
    });
    animator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            mIsBurstAnimStart = false;
            if(mDragListener != null){
                mDragListener.onDismiss();
            }
        }
    });
    animator.start();
}

三、全屏拖拽效果實(shí)現(xiàn)

首先在DOWN事件中獲取當(dāng)前觸摸位置在全屏所在位置辖试，然后將當(dāng)前view緩存為bitmap辜王，并把此bitmap添加到rootview中，拖動(dòng)的時(shí)候直接繪制此bitmap罐孝。

//獲得當(dāng)前View在屏幕上的位置
int[] cLocation = new int[2];
getLocationOnScreen(cLocation);

if(rootView instanceof ViewGroup){
    mDragDotView = new DragDotView(getContext());

    //設(shè)置固定圓和移動(dòng)圓的圓心坐標(biāo)
    mDragDotView.setDragPoint(cLocation[0] + mWidth / 2, cLocation[1] + mHeight / 2, mRawX, mRawY);

    Bitmap bitmap = getBitmapFromView(this);
    if(bitmap != null){
        mDragDotView.setCacheBitmap(bitmap);
        ((ViewGroup) rootView).addView(mDragDotView);
        setVisibility(INVISIBLE);
    }
}

/**
 * 將當(dāng)前view緩存為bitmap呐馆，拖動(dòng)的時(shí)候直接繪制此bitmap
 * @param view
 * @return
 */
public Bitmap getBitmapFromView(View view)
{
    Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    view.draw(canvas);
    return bitmap;
}

至此，整個(gè)消息氣泡拖拽效果的核心部分就實(shí)現(xiàn)了莲兢，完整代碼見(jiàn)https://github.com/loren325/CustomerView