iOS —— QQ中未读气泡拖拽消失的实现

Tips: OA ⊥ AB, PB ⊥ AB ,且 OA=PB=d/2.

现在我们已经有了数学表达式，接下来就是要把数学表达式转化成代码了。
我们需要创建一系列变量：
CGFloat r1; // backView

    CGFloat r2; // frontView
    CGFloat x1;    CGFloat y1;    CGFloat x2;    CGFloat y2;    CGFloat centerDistance;    CGFloat cosDigree;    CGFloat sinDigree;    CGPoint pointA; //A
    CGPoint pointB; //B
    CGPoint pointD; //D
    CGPoint pointC; //C
    CGPoint pointO; //O
    CGPoint pointP; //P

接下来我们需要一个毫秒级定时器 CADisplayLink。

displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkAction:)];  

根据数学公式，在 displayLink 绑定的方法 displayLinkAction 中把每个坐标点用代码表达出来：

    x1 = backView.center.x;
    y1 = backView.center.y;
    x2 = self.frontView.center.x;
    y2 = self.frontView.center.y;    //d
    centerDistance = sqrtf((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));    //sinΘ 和 cosΘ    if (centerDistance == 0) {
        cosDigree = 1;
        sinDigree = 0;
    }else{
        cosDigree = (y2-y1)/centerDistance;
        sinDigree = (x2-x1)/centerDistance;
    }
    pointA = CGPointMake(x1-r1*cosDigree, y1+r1*sinDigree);  // A
    pointB = CGPointMake(x1+r1*cosDigree, y1-r1*sinDigree); // B
    pointD = CGPointMake(x2-r2*cosDigree, y2+r2*sinDigree); // D
    pointC = CGPointMake(x2+r2*cosDigree, y2-r2*sinDigree);// C
    pointO = CGPointMake(pointA.x + (centerDistance / 2)*sinDigree, pointA.y + (centerDistance / 2)*cosDigree);
    pointP = CGPointMake(pointB.x + (centerDistance / 2)*sinDigree, pointB.y + (centerDistance / 2)*cosDigree);

通过这些点，就可以画出贝塞尔曲线了：

- (void)drawRect{
    backView.center = oldBackViewCenter;
    backView.bounds = CGRectMake(0, 0, r1*2, r1*2);
    backView.layer.cornerRadius = r1;
    cutePath = [UIBezierPath bezierPath];
    [cutePath moveToPoint:pointA];
    [cutePath addQuadCurveToPoint:pointD controlPoint:pointO];
    [cutePath addLineToPoint:pointC];
    [cutePath addQuadCurveToPoint:pointB controlPoint:pointP];
    [cutePath moveToPoint:pointA];    if (backView.hidden == NO) {
        shapeLayer.path = [cutePath CGPath];
        shapeLayer.fillColor = [fillColorForCute CGColor];
        [self.containerView.layer insertSublayer:shapeLayer below:self.frontView.layer];
    }
}

<p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(255, 255, 255);">- (<span style="font-variant-ligatures: no-common-ligatures; color: #de38a6">IBAction</span>)playerAction:(<span style="font-variant-ligatures: no-common-ligatures; color: #de38a6">id</span>)sender {</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(8, 250, 149);"><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">    [</span>adManager<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>startPlayCid<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">0</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>adtype<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">0</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff"> </span>cod<span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">:</span><span style="font-variant-ligatures: no-common-ligatures; color: #8b87ff">2</span><span style="font-variant-ligatures: no-common-ligatures; color: #ffffff">];</span></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 13px; font-family: Menlo; color: rgb(255, 255, 255);">}</p><div>
</div>

大致实现思路还是很清晰的，无非在分析如何计算6个关键点的时候需要花点时间。