在QQ的好友列表頁中，當有好友消息沒有查看時，UITableviewCell的右邊就會出現(xiàn)一個紅色的小圓球，并提示未讀的消息數(shù)。其實它除了可以提示未讀消息數(shù)，還有很棒的動畫效果哦~~
今天我們就來寫一個消息提示球的demo。供大家一起學習探討一下。
效果圖如下：
消息提示球gif效果圖.gif
實現(xiàn)思路:
大體的結(jié)構(gòu)是一個大圓UIButton下，插入一個小圓UIView。當手勢拖動時，計算并繪制出兩個圓之間的不規(guī)則圖形（類似梯形），并將其軌跡中填充顏色。設(shè)置最長拖動距離，當超出距離且手勢拖動結(jié)束，那么就會出現(xiàn)銷毀動畫。如果不超出距離，會回彈至原來的位置。
具體業(yè)務(wù)實現(xiàn)中的注意點：
1.自定義大圓控件（UIButton），UIButton既可以顯示背景圖片，又可以顯示文字
2.讓大圓控件隨著手指移動而移動
- 注意不能根據(jù)形變（transform.translation）修改大圓的位置，只能通過center，因為全程都需要用到中心點計算。
3.在拖動的時候，添加一個小圓控件在原來大圓控件的位置
- 注意這個小圓控件并不會隨著手指移動而移動，因此應(yīng)該添加到父控件上
- 一開始設(shè)置中心點和尺寸和大圓控件一樣。
- 隨著大圓拖動，小圓半徑不斷減少，可以根據(jù)兩個圓心的距離，隨便生成一段比例，隨著圓心距離增加，圓心半徑不斷減少。
// 計算小圓半徑：隨機搞個比例，隨著圓心距離增加，圓心半徑不斷減少。
CGFloat smallRadius = _circleR2 - d / 10;
- 每次小圓改變，需要重新設(shè)置小圓的尺寸和圓角半徑。
4.粘性效果
- 就是在兩圓之間繪制一個形變矩形，描述形變矩形路徑。
- 這里需要用到CAShapeLayer,可以根據(jù)一個路徑，生成一個圖層，展示出來。把形變圖層添加到父控件并且顯示在小圓圖層下就OK了。因為所有計算出來的點，都是基于父控件。
注意：這里不能用繪圖，因為繪圖內(nèi)容只要超過當前控件尺寸就不會顯示，但是當前形變矩形必須顯示在控件之外
5.粘性業(yè)務(wù)邏輯處理
- 當圓心距離超過100，就不需要描述形變矩形（并且把之前的形變矩形移除父層），小圓也需要隱藏。
- 沒有超過100，則相反。
6.手指停止拖動業(yè)務(wù)邏輯
- 判斷下圓心是否超過100，超過就播放爆炸效果，添加個UIImageView在當前控件上，并且需要取消控制器view的自動布局。
// 取消Autoresizing轉(zhuǎn)自動布局self.view.translatesAutoresizingMaskIntoConstraints = NO;
- 沒有超過，就還原。
源程序可以移步github：
https://github.com/CoderJWYang/JWMessageBubble/tree/master
如果有所收獲，請點個star哦~~??
