Android貝塞爾曲線初步學(xué)習(xí)第二課仿QQ未讀消息氣泡拖拽黏連效果

更新時間：2022年06月29日 14:43:12 作者：猴菇先生

這篇文章主要為大家詳細(xì)介紹了Android貝塞爾曲線初步學(xué)習(xí)的第二課，仿QQ未讀消息氣泡拖拽黏連效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

上一節(jié)初步了解了Android端的貝塞爾曲線，這一節(jié)就舉個栗子練習(xí)一下，仿QQ未讀消息氣泡，是最經(jīng)典的練習(xí)貝塞爾曲線的東東，效果如下

這里寫圖片描述

附上github源碼地址：https://github.com/MonkeyMushroom/DragBubbleView

歡迎star~

大體思路就是畫兩個圓，一個黏連小球固定在一個點(diǎn)上，一個氣泡小球跟隨手指的滑動改變坐標(biāo)。隨著兩個圓間距越來越大，黏連小球半徑越來越小。當(dāng)間距小于一定值，松開手指氣泡小球會恢復(fù)原來位置；當(dāng)間距超過一定值之后，黏連小球消失，氣泡小球繼續(xù)跟隨手指移動，此時手指松開，氣泡小球消失~

1、首先老一套~新建attrs.xml文件，編寫自定義屬性，新建DragBubbleView繼承View，重寫構(gòu)造方法，獲取自定義屬性值，初始化Paint、Path等東東，重寫onMeasure計算寬高，這里不再啰嗦~

2、在onSizeChanged方法中確定黏連小球和氣泡小球的圓心坐標(biāo)，這里我們?nèi)捀叩囊话耄?/p>

@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、經(jīng)分析氣泡小球有以下幾個狀態(tài)：默認(rèn)、拖拽、移動、消失，我們這里定義一下，方便根據(jù)不同的狀態(tài)分析不同情況：

/* 氣泡的狀態(tài) */
private int mState;
/* 默認(rèn)，無法拖拽 */
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 + maxD / 4) {
  //當(dāng)指尖坐標(biāo)在圓內(nèi)的時候，才認(rèn)為是可拖拽的
  //一般氣泡比較小，增加(maxD/4)像素是為了更輕松的拖拽
  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 - maxD / 4) {//減去(maxD/4)的像素大小，是為了讓黏連小球半徑到一個較小值快消失時直接消失
  mCircleRadius = mBubbleRadius - d / 8;//使黏連小球半徑漸漸變小
  if (mOnBubbleStateListener != null) {
  mOnBubbleStateListener.onDrag();
  }
  } else {//間距大于于可黏連的最大距離
  mState = STATE_MOVE;//改為移動狀態(tài)
  if (mOnBubbleStateListener != null) {
  mOnBubbleStateListener.onMove();
  }
  }
 }
 invalidate();
 }
 break;
 case MotionEvent.ACTION_UP:
 if (mState == STATE_DRAG) {//正在拖拽時松開手指，氣泡恢復(fù)原來位置并顫動一下
 setBubbleRestoreAnim();
 } else if (mState == STATE_MOVE) {//正在移動時松開手指
 //如果在移動狀態(tài)下間距回到兩倍半徑之內(nèi)，我們認(rèn)為用戶不想取消該氣泡
 if (d < 2 * mBubbleRadius) {//那么氣泡恢復(fù)原來位置并顫動一下
  setBubbleRestoreAnim();
 } else {//氣泡消失
  setBubbleDismissAnim();
 }
 }
 break;
 }
 return true;
}

如果控件外面有嵌套ListView、RecyclerView等攔截焦點(diǎn)的控件，那就在ACTION_DOWN中請求父控件不攔截事件：

getParent().requestDisallowInterceptTouchEvent(true);

然后ACTION_UP再把事件還回去：

getParent().requestDisallowInterceptTouchEvent(false);

5、在onDraw方法中畫圓、畫貝賽爾曲線、畫消息個數(shù)文本：

@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);
 //計算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)
 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);
 }
 //畫消息個數(shù)的文本
 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);
 }
}

其中計算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)，順序是moveTo A, quadTo B, lineTo C, quadTo D, close
先來張示意圖：

這里寫圖片描述

再上代碼

/**
 * 計算二階貝塞爾曲線做需要的起點(diǎn)、終點(diǎn)和控制點(diǎn)坐標(biāo)
 */
private void calculateBezierCoordinate(){
 //計算控制點(diǎn)坐標(biāo)，為兩圓圓心連線的中點(diǎn)
 mControlX = (mBubbleCenterX + mCircleCenterX) / 2;
 mControlY = (mBubbleCenterY + mCircleCenterY) / 2;
 //計算兩條二階貝塞爾曲線的起點(diǎn)和終點(diǎn)
 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、氣泡復(fù)原的動畫，使用估值器計算坐標(biāo)

/**
 * 設(shè)置氣泡復(fù)原的動畫
 */
private void setBubbleRestoreAnim() {
 ValueAnimator anim = ValueAnimator.ofObject(new PointFEvaluator(),
 new PointF(mBubbleCenterX, mBubbleCenterY),
 new PointF(mCircleCenterX, mCircleCenterY));
 anim.setDuration(200);
 //使用OvershootInterpolator差值器達(dá)到顫動效果
 anim.setInterpolator(new OvershootInterpolator(5));
 anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 PointF curPoint = (PointF) animation.getAnimatedValue();
 mBubbleCenterX = curPoint.x;
 mBubbleCenterY = curPoint.y;
 invalidate();
 }
 });
 anim.addListener(new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
 //動畫結(jié)束后狀態(tài)改為默認(rèn)
 mState = STATE_DEFAULT;
 if (mOnBubbleStateListener != null) {
 mOnBubbleStateListener.onRestore();
 }
 }
 });
 anim.start();
}

/**
 * PointF動畫估值器
 */
public class PointFEvaluator implements TypeEvaluator<PointF> {

 @Override
 public PointF evaluate(float fraction, PointF startPointF, PointF endPointF) {
 float x = startPointF.x + fraction * (endPointF.x - startPointF.x);
 float y = startPointF.y + fraction * (endPointF.y - startPointF.y);
 return new PointF(x, y);
 }
}

7、順便來個氣泡狀態(tài)的監(jiān)聽器，方便外部調(diào)用監(jiān)聽其狀態(tài)：

/**
 * 氣泡狀態(tài)的監(jiān)聽器
 */
public interface OnBubbleStateListener {
 /**
 * 拖拽氣泡
 */
 void onDrag();

 /**
 * 移動氣泡
 */
 void onMove();

 /**
 * 氣泡恢復(fù)原來位置
 */
 void onRestore();

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

/**
 * 設(shè)置氣泡狀態(tài)的監(jiān)聽器
 */
public void setOnBubbleStateListener(OnBubbleStateListener onBubbleStateListener) {
 mOnBubbleStateListener = onBubbleStateListener;
}

8、關(guān)于氣泡爆炸的動畫，思路就是放幾張圖片到drawable里，然后動態(tài)計數(shù)重繪，在onDraw中調(diào)用canvas.drawBitmap()方法，具體如下：

/* 氣泡爆炸的圖片id數(shù)組 */
private int[] mExplosionDrawables = {R.drawable.explosion_one, R.drawable.explosion_two
 , R.drawable.explosion_three, R.drawable.explosion_four, R.drawable.explosion_five};
/* 氣泡爆炸的bitmap數(shù)組 */
private Bitmap[] mExplosionBitmaps;
/* 氣泡爆炸當(dāng)前進(jìn)行到第幾張 */
private int mCurExplosionIndex;
/* 氣泡爆炸動畫是否開始 */
private boolean mIsExplosionAnimStart = false;

在構(gòu)造方法中：

mExplosionPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mExplosionPaint.setFilterBitmap(true);
mExplosionRect = new Rect();
mExplosionBitmaps = new Bitmap[mExplosionDrawables.length];
for (int i = 0; i < mExplosionDrawables.length; i++) {
 //將氣泡爆炸的drawable轉(zhuǎn)為bitmap
 Bitmap bitmap = BitmapFactory.decodeResource(getResources(), mExplosionDrawables[i]);
 mExplosionBitmaps[i] = bitmap;
}

然后在手指抬起的時候使用如下動畫：

/**
 * 設(shè)置氣泡消失的動畫
 */
private void setBubbleDismissAnim() {
 mState = STATE_DISMISS;//氣泡改為消失狀態(tài)
 mIsExplosionAnimStart = true;
 if (mOnBubbleStateListener != null) {
 mOnBubbleStateListener.onDismiss();
 }
 //做一個int型屬性動畫，從0開始，到氣泡爆炸圖片數(shù)組個數(shù)結(jié)束
 ValueAnimator anim = ValueAnimator.ofInt(0, mExplosionDrawables.length);
 anim.setInterpolator(new LinearInterpolator());
 anim.setDuration(500);
 anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 //拿到當(dāng)前的值并重繪
 mCurExplosionIndex = (int) animation.getAnimatedValue();
 invalidate();
 }
 });
 anim.addListener(new AnimatorListenerAdapter() {
 @Override
 public void onAnimationEnd(Animator animation) {
 //動畫結(jié)束后改變狀態(tài)
 mIsExplosionAnimStart = false;
 }
 });
 anim.start();
}

最后在onDraw中：

if (mIsExplosionAnimStart && mCurExplosionIndex < mExplosionDrawables.length) {
 //設(shè)置氣泡爆炸圖片的位置
 mExplosionRect.set((int) (mBubbleCenterX - mBubbleRadius), (int) (mBubbleCenterY - mBubbleRadius)
 , (int) (mBubbleCenterX + mBubbleRadius), (int) (mBubbleCenterY + mBubbleRadius));
 //根據(jù)當(dāng)前進(jìn)行到爆炸氣泡的位置index來繪制爆炸氣泡bitmap
 canvas.drawBitmap(mExplosionBitmaps[mCurExplosionIndex], null, mExplosionRect, mExplosionPaint);
}

9、在布局文件中使用該控件，并使用自定義屬性：

<?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"
 android:clipChildren="false"
 tools:context=".MainActivity">

 <com.monkey.dragpopview.DragBubbleView
 android:id="@+id/dragBubbleView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 monkey:bubbleColor="#ff0000"
 monkey:bubbleRadius="12dp"
 monkey:text="99+"
 monkey:textColor="#ffffff"
 monkey:textSize="12sp" />

</RelativeLayout>

其中 android:clipChildren=”false” 這個屬性可以使根布局下的子控件超出本身控件范圍的大小，加上這個屬性就可以滿屏幕隨意拖拽而不必拘泥于它本身的大小了，炒雞方便~

還有如果覺得在屬性中設(shè)置消息個數(shù)不方便，需要在代碼中動態(tài)獲取數(shù)據(jù)并設(shè)置的話，只要在DragBubbleView中添加一個方法即可

public void setText(String text){
 mText = text;
 invalidate();
}

10、在MainActivity中：

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

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

 @Override
 public void onRestore() {
 Log.e("---> ", "氣泡恢復(fù)原來位置");
 }

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

總結(jié)

這次既練習(xí)了自定義View，還囊括了貝賽爾曲線，坐標(biāo)的計算一定要畫圖，簡單直觀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: