Imitation mobile QQ message Little Red dot animation 2

Objective

In the previous article, the implementation of the animation is roughly clear, you need to confirm the small tail of the drawing area, the key is to determine the location of 4 vertices. You can choose different calculation methods according to your needs.
Today, to achieve:

1. The addition of text
2. The tail is elongated with an arc instead of a line

Here is the present:

Text add

For the sake of simplicity, there is no interface for attributes such as the color font of the text, but only the fixed values are set internally, and a class method is provided to generate the object. Such as:

+ (Instancetype) Zzspringviewwithtext: (NSString *) text;

In this method you need to do:

1. Determines the graphics area of text drawing, based on text content
2. Determines the bounds of a view object based on the drawing area of the text
3. If possible, limit the length of the text (the maximum number of messages on QQ display 99+)

In drawRect , what needs to be done:

1. Draw a view with rounded corners
2. Draw text

As shown below:

//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, Nsforegroundco    Lorattributename: [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

Which bgTextSize is the size of the previously computed text.

Arc

Draw the curve here CGContextAddQuadCurveToPoint , where the control point is taken from controlPoint a point between two centers (see figure), where I take the center-length of the Golden section as a control point. From the actual operating situation, it is possible that the radian is not too obvious and requires a later leveling of parameters.
Here's a correction, the previous method of calculating the tangent point was wrong:

1. Trigonometric functions Forget open radical
2. The formula for the pointcut is wrong.

It is necessary to note that, because the text is added here to determine the P1 circle on the 2 vertex position, you should be careful not to overwrite the text area, or when moving, the text will be overwritten.
In addition, I found that in QQ, drag bouncing back in the animation, the Little red dot will appear a lot of criss-crossing white line (bug), is estimated to be used to calculate the connection point.

Summarize

This animation itself has no technical difficulty (meaning that the framework involved in the content is not particularly complex), complex is the determination of some key values: The main is to drag the tail of the drawing area of the determination. This part of the solution, the animation will not achieve the difficulty. Of course, if you want to encapsulate a library to invoke, you need to be more diligent: interface design, configurable parameters (color, font, shadow, etc.), which are left to everyone to customize it

Imitation mobile QQ message Little Red dot animation 2