仿手機QQ消息小紅點動畫2

前言

上一篇把動畫的實現步驟大體理清，須要確認小尾巴的繪製區域，關鍵就是肯定4個頂點的位置。你們能夠根據須要，選擇不一樣的計算方式。
今天，要實現：

1. 文字的添加
2. 尾巴拉長用弧形代替直線

下面是如今的效果圖：

文字添加

爲了簡單，這裏對文字的顏色字體等屬性不提供接口，而只是在內部設置固定的值；提供一個類方法生成對象。如：

+ (instancetype)zzspringViewWithText:(NSString *)text;

 

在這個方法裏面須要作：

1. 根據text內容，肯定文字繪製的圖形區域
2. 根據文字的繪製區域，肯定view對象的bounds
3. 可能的狀況下，限制文字的長度（QQ上消息數最多顯示99+）

在drawRect中，須要作的事：

1. 繪製帶圓角的view
2. 繪製文字

以下所示：

//draw corner round rectangle
-(void) p_drawRoundedRectWithContext:(CGContextRef)context withRect:(CGRect)rect
{
    CGContextSaveGState(context);

    CGFloat radius = CGRectGetMaxY(rect)*0.4;
    CGFloat puffer = CGRectGetMaxY(rect)*0.10;
    CGFloat maxX = CGRectGetMaxX(rect) - puffer;
    CGFloat maxY = CGRectGetMaxY(rect) - puffer;
    CGFloat minX = CGRectGetMinX(rect) + puffer;
    CGFloat minY = CGRectGetMinY(rect) + puffer;

    CGContextBeginPath(context);
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextAddArc(context, maxX-radius, minY+radius, radius, M_PI+(M_PI/2), 0, 0);
    CGContextAddArc(context, maxX-radius, maxY-radius, radius, 0, M_PI/2, 0);
    CGContextAddArc(context, minX+radius, maxY-radius, radius, M_PI/2, M_PI, 0);
    CGContextAddArc(context, minX+radius, minY+radius, radius, M_PI, M_PI+M_PI/2, 0);

    CGContextFillPath(context);

    CGContextRestoreGState(context);

}
-(void) p_drawTextWithContext:(CGContextRef)context 
{
    NSDictionary *fontAttr = @{
                                   NSFontAttributeName : fontText,
                                   NSForegroundColorAttributeName: [UIColor whiteColor]
                                   };
    if (CGSizeEqualToSize(bgTextSize, CGSizeZero))
    {
        bgTextSize = [self.badgeText sizeWithAttributes:fontAttr];
    }

    CGPoint textPoint = CGPointMake((rect.size.width/2-bgTextSize.width/2), (rect.size.height/2-bgTextSize.height/2) - 1 );
    self.badgeText drawAtPoint:textPoint withAttributes:fontAttr];
 }

draw text && arch rectangle

 

其中，bgTextSize是以前計算過的文字的size。

弧線

繪製曲線，這裏使用CGContextAddQuadCurveToPoint，這裏的控制點controlPoint取自兩圓心之間的某點(見圖)，這裏我取了圓心長度的黃金分割點處做爲控制點。從實際的運行狀況下，可能弧度不是太明顯，須要後期再調配參數。
這裏還要糾正一下，上一篇計算切點時的方法有誤：

1. 三角函數忘記開根號
2. 求切點的公式算錯了

這裏須要說明的是，由於添加了文字，在這裏肯定P1圓上2個頂點位置的時候，要注意不要覆蓋到文字區域，不然移動的時候，文字會被覆蓋。
另外，我發現QQ中，拖拽彈回的動畫中，小紅點上會出現不少縱橫交錯的白線(bug嗎)，估計是用於計算鏈接點用的。

總結

自己這個動畫沒有什麼技術難度(意思是涉及到的框架內容不實特別複雜)，複雜得是一些關鍵數值的肯定：主要就是拖拽時尾巴的繪製區域的肯定。把這一部分解決了，動畫也就沒有實現的難度了。固然，若是要封裝成一個庫來調用，還須要再精進：接口的設計，可配置的參數（顏色，字體，陰影等），這些就留給大夥自定義吧