QQ中的消息数量提示球

在QQ的好友列表页中，当有好友消息没有查看时，UITableviewCell的右边就会出现一个红色的小圆球，并提示未读的消息数。其实它除了可以提示未读消息数，还有很棒的动画效果哦~~
今天我们就来写一个消息提示球的demo。供大家一起学习探讨一下。
效果图如下：

消息提示球gif效果图.gif

实现思路:
大体的结构是一个大圆UIButton下，插入一个小圆UIView。当手势拖动时，计算并绘制出两个圆之间的不规则图形（类似梯形），并将其轨迹中填充颜色。设置最长拖动距离，当超出距离且手势拖动结束，那么就会出现销毁动画。如果不超出距离，会回弹至原来的位置。
具体业务实现中的注意点：
1.自定义大圆控件（UIButton），UIButton既可以显示背景图片，又可以显示文字

2.让大圆控件随着手指移动而移动

• 注意不能根据形变（transform.translation）修改大圆的位置，只能通过center，因为全程都需要用到中心点计算。

3.在拖动的时候，添加一个小圆控件在原来大圆控件的位置

• 注意这个小圆控件并不会随着手指移动而移动，因此应该添加到父控件上
• 一开始设置中心点和尺寸和大圆控件一样。
• 随着大圆拖动，小圆半径不断减少，可以根据两个圆心的距离，随便生成一段比例，随着圆心距离增加，圆心半径不断减少。

// 计算小圆半径：随机搞个比例，随着圆心距离增加，圆心半径不断减少。
        CGFloat smallRadius = _circleR2 - d / 10;

• 每次小圆改变，需要重新设置小圆的尺寸和圆角半径。

4.粘性效果

• 就是在两圆之间绘制一个形变矩形，描述形变矩形路径。
• 这里需要用到CAShapeLayer,可以根据一个路径，生成一个图层，展示出来。把形变图层添加到父控件并且显示在小圆图层下就OK了。因为所有计算出来的点，都是基于父控件。
• 注意：这里不能用绘图，因为绘图内容只要超过当前控件尺寸就不会显示，但是当前形变矩形必须显示在控件之外

5.粘性业务逻辑处理

• 当圆心距离超过100，就不需要描述形变矩形（并且把之前的形变矩形移除父层），小圆也需要隐藏。
• 没有超过100，则相反。

6.手指停止拖动业务逻辑

• 判断下圆心是否超过100，超过就播放爆炸效果，添加个UIImageView在当前控件上，并且需要取消控制器view的自动布局。

// 取消Autoresizing转自动布局self.view.translatesAutoresizingMaskIntoConstraints = NO;

• 没有超过，就还原。

源程序可以移步github：
https://github.com/CoderJWYang/JWMessageBubble/tree/master
如果有所收获，请点个star哦~~✨✨