Recommended by experts: iOS custom drop-down line animation

This is the second demo in this chapter. In this case, I combined line animation with mathematical knowledge. Through this case, I can show you how to deduce a mathematical formula and use it in a custom animation.

First, let’s take a look at the final effect:

OK, you can see that as the finger slides on the screen, the lines gradually get closer at first, then start to bend after reaching a certain position, and finally merge into a circle. By the way, I have encapsulated this animation into a pull-up and pull-down refresh control, and used it in the independently developed app of Elephant Association. You can download it in advance to see the actual effect.

Let me tell you how I think about this animation. First of all, the final control of the progress of this animation is a custom property inside CALayer:

 @property (nonatomic,assign)CGFloat progress;

Whether you slide your finger to create an offset or slide a UISlider to change a value, it will eventually be converted to a change in this property. Then, in the setter method of this property, we let the layer redraw in real time, like this:

 -( void )setProgress:(CGFloat)progress{ self.curveLayer.progress = progress;
 [self.curveLayer setNeedsDisplay];
 }

As for the redrawing algorithm, it is a matter of detail. When we make an animation, we first consider the macro and then the details. Just like developing an App, we must first consider the architecture, and then add bricks and tiles to the framework and make repairs. Now that we have a clear idea of ​​the overall idea of ​​this animation, let's start to think about the implementation of the specific algorithm in detail. I divided this animation into two stages: 0~0.5 and 0.5~1.0. What does this mean?

When it comes to animation, the same old saying applies: "Be good at decomposition." Let's first look at the first half, which is the stage where progress moves from 0 at the beginning to the middle state of 0.5. In this stage, the two line segments move toward the middle from the top and bottom directions respectively until they touch the midline. The line drawing algorithm for this stage is very simple. As long as the coordinates of points A and B can be obtained in real time, the rest can be done using UIBezierPath's moveToPoint and addLineToPoint. Therefore, the problem is transformed into a formula for finding the movement of points A and B (in fact, only one point needs to be found, and the other point is nothing more than a line segment length h). Please watch the demonstration animation (Note: There are interactive animations in the e-book, but because it is now presented in the form of an article, I can only show you through pictures)

In fact, as long as you are willing to put pen to paper and try to deduce it, it is not difficult to find the motion formula of these two points:

yA = H/2 + h + (1-2progress) (H/2 - h)

yB = H/2 + (1-2progress) (H/2 - h)

Next is the second stage of the animation, 0.5-1.0. This stage is a little complicated: "Point B remains stationary, point A continues to move to the position of B, and at the same time, draw another arc at the top according to the current progress." Visually, it feels like the tail is gradually shortening and the head is slowly bending. Again, I can only show you in the form of pictures.

In this process, it is not difficult for us to first find the coordinates of point A:

yA = H/2 + h - h(progress - 0.5) 2

The more troublesome part is how to draw this arc? The answer is that you can use the method provided in UIBezierPath - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0); to draw an arc. The specific idea is: use CGPointMake(self.frame.size.width/2, self.frame.size.height/2) as the center, 10 as the radius, and draw in a clockwise direction from the starting angle of M_PI(90°) to the ending angle of 2*M_PI.

Explanation of the method - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise; If the start angle is set to 0 and the end angle is set to π, then when clockwise is set to YES, the lower half of the arc is drawn; conversely, when clockwise is set to NO, the upper half of the arc is drawn;

Above, we have only completed the entire process for one line segment. Similarly, we can also obtain the drawing algorithm for another line segment. Finally, don't forget that there is an arrow at the top of the line segment. Algorithm for drawing arrows Gallery 4.1: We use point B as the starting point of the arrow and extend it 3 units diagonally to the lower left at an angle of 30°. The same is true after bending, just add the angle of the line segment.

The corresponding code is:

 [arrowPath moveToPoint:pointB];
 [arrowPath addLineToPoint:CGPointMake(pointB.x - 3 *(cosf(Degree)), pointB.y + 3 *(sinf(Degree)))];
 [curvePath1 appendPath:arrowPath];

OK, this is the end of the analysis of this demo. The complete code can be downloaded from the Github Repo corresponding to this book: https://github.com/KittenYang/A-GUIDE-TO-iOS-ANIMATION.

About the author: KITTEN-YANG is a senior student currently doing an iOS internship at Smartisan Technology. I am obsessed with interactive animation and aspire to be a top software engineer and interactive designer. You can visit my personal website http://kittenyang.com or make friends with me on Weibo: @KITTEN-YANG Thank you.