QQ中未读气泡拖拽消失的实现（参照一位年轻牛B的博主的思路自己实现了一下）

原文链接：http://kittenyang.com/drawablebubble/，博主年轻却很有思想。相仿的年纪，很佩服他！

首先分析拖拽时的图，大圆、不规则的图（实际上时有规律的不然也画不出来，这里只是代指）、小圆。对，拖拽时的效果就是这三部分拼凑成的。博主 大圆用了UIView 不规则的图 用CAShapeLayer ，小圆也是UIView，在我自己实现时，发现其实大圆用UIView，小圆和中间那部分 用CAShapeLayer就能画出来了。CAHShapeLayer 都知道给它传一个path，它就能根据path生成任意形状的layer。所以后面其实就是用贝塞尔曲线构建这个path，这个path构建对于我这种被大学上了四年的人来说，没有前人的基础，估计打死也没有这种想法。

下面就是 构建 A、B、C、D、O、P 这六个点，创建path，给CAShapeLayer，生成layer。

下面时部分代码：

处理手势的

/** 处理手势 */- (void)panGesture:(UIPanGestureRecognizer *)gesture {  // self.containerView bubbleView 的父视图  CGPoint newCenter = [gesture locationInView:self.containerView];    self.bubbleView.center = newCenter;    if (gesture.state == UIGestureRecognizerStateBegan) {        // 手势开始 移除动画    [self.bubbleView.layer removeAllAnimations];      }else if (gesture.state == UIGestureRecognizerStateChanged) {        // 圆心距离 >＝ 断裂的距离    if (centerDistance >= self.maxDistance ) {            // 大于设定的值时 断裂 移除shapeView      [self.shapeLayer removeFromSuperlayer];          }else {            // 更新 贝塞尔曲线shapeView 的形状      [self updateCoordinate:newCenter];    }      }else if (gesture.state == UIGestureRecognizerStateCancelled || gesture.state == UIGestureRecognizerStateEnded || gesture.state == UIGestureRecognizerStateFailed) {        // 大于 设定值 并且实现了 block，执行block    if (centerDistance >= self.maxDistance && self.breakComplete) {      self.breakComplete();    }else {            // 让小球回到 初始点      [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.4 initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{        self.bubbleView.center = initBubbleCenter;      } completion:^(BOOL finished) {        // 小球回到初始点 圆心距离归零        centerDistance = 0;                if (finished && self.achieveAnimation) {          [self animationForBubbleView];        }              }];    }        [self.shapeLayer removeFromSuperlayer];      }}

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：QQ中未读气泡拖拽消失的实现（参照一位年轻牛B的博主的思路自己实现了一下）

关键词：