QQ中未讀氣泡拖拽消失的實現（參照一位年輕牛B的博主的思路自己實現了一下），氣泡拖拽

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];            }}

    手勢的拖拽導致大圓中心點更新，以此更新A、B、C、D、O、P六個點，跟新path，對於CAShapeLayer來說，你傳給他一個新的path，它就會更新它的形狀

/** 根據新的中心點 更新 ABCDOP6個點 以更行CAShapeLayer 的path */- (void)updateCoordinate:(CGPoint)currentCenter {        CGFloat x2 = currentCenter.x;    CGFloat y2 = currentCenter.y;    CGFloat x1 = initBubbleCenter.x;    CGFloat y1 = initBubbleCenter.y;        // 當前圓心 於 初始點圓心距離    centerDistance = sqrt((x2-x1) * (x2-x1)+(y2-y1)*(y2-y1));            // 更新初始化圓心處 圓的半徑（隨著拖拽的距離的增大而減小，達到設定的距離 消失）            if (centerDistance == 0) {        cos = 1;        sin = 0;    }else{        cos = (y2-y1) / centerDistance;        sin = (x2-x1) / centerDistance;    }    r1 = r2 * (1 - (centerDistance / self.maxDistance) * self.modulus);        A = CGPointMake(x1 - r1*cos, y1 + r1*sin);    B = CGPointMake(x1 + r1*cos, y1 - r1*sin);    C = CGPointMake(x2 + r2*cos, y2 - r2*sin);    D = CGPointMake(x2 - r2*cos, y2 + r2*sin);        O = CGPointMake(A.x + centerDistance / 2.0*sin, A.y + centerDistance / 2.0 * cos);    P = CGPointMake(B.x + centerDistance / 2.0*sin, B.y + centerDistance / 2.0*cos);    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:initBubbleCenter radius:r1 startAngle:0 endAngle:M_PI * 2 clockwise:1];        UIBezierPath *path1 = [UIBezierPath bezierPath];    [path1 moveToPoint:A];    [path1 addLineToPoint:B];    [path1 addQuadCurveToPoint:C controlPoint:P];    [path1 addLineToPoint:D];    [path1 addQuadCurveToPoint:A controlPoint:O];    [path appendPath:path1];        self.shapeLayer.path = path.CGPath;        }

完整代碼：http://pan.baidu.com/s/1dEzZLst