仿手機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嗎)，估計是用於計算連接點用的。

總結

本身這個動畫沒有什麼技術難度(意思是涉及到的架構內容不實特別複雜)，複雜得是一些關鍵數值的確定：主要就是拖拽時尾巴的繪製地區的確定。把這一部分解決了，動畫也就沒有實現的難度了。當然，如果要封裝成一個庫來調用，還需要再精進：介面的設計，可配置的參數（顏色，字型，陰影等），這些就留給大夥自訂吧 

 

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