[iOS animation core technology and case combat] iOS animation analysis three steps

Let’s start by looking at the three roles in animation design: the responsibilities of a product designer, an algorithm analyst, and a great programmer.
(1) Product designer: Tell everyone what kind of animation you want to make.
(2) Algorithm analyst: analyze the realization principle of animation and design the corresponding animation algorithm.
(3) Programmers: Think about how to implement algorithms in code.
　　In general small and medium-sized companies, developers often have multiple roles. Not only to write code but also to participate in the design of the algorithm, and even participate in the design of the animation prototype. Therefore, it is very necessary to understand the different roles in the animation design process and to understand the analysis process of animation.

1 Animation analysis method
　　The following figure is the animation effect we want to achieve, so how to analyze it? In fact, when product designers are designing animations, if they can decompose animations into single-frame images, or can show the changing process of animations relatively slowly, then it is important for algorithm analysts and programmers to analyze the principles of animations and design appropriate presentation algorithms. plays a very important role. The image below depicts the effect of the login button as it moves from left to right and ends up in the middle of the view layer.
[Figure 1]

　　This animation effect is very simple, and its implementation algorithm can be described in one sentence, that is, the horizontal position coordinates of the image and the time have a linear gradient relationship. Next, think about how to achieve this effect with code. According to the animation display process, the animation is divided into: the animation start stage, the animation progress stage and the animation end stage.

1. At the beginning of the animation, at the moment
　　when the animation starts, it is hoped that the animation will fly in from outside the visual interface of the screen. The login button as shown in the figure below is the starting position of the animation that needs to be implemented.
【figure 2】
　　In the iOS view, the upper left corner is the origin of the view (0, 0), the horizontal rightward is the x-axis increasing direction, and the vertical downward is the y-axis increasing direction. Only when the View view is located in the display coordinate system of the mobile phone screen, everyone can be seen (the controls are not visible in the dotted area), otherwise the login button is invisible. So at the beginning of the animation, the position property of the animation can be set outside the interface.

2. Animation stage
　　After the previous analysis, everyone has understood the realization algorithm of this animation effect, that is, the coordinates of the login button change linearly with time along the horizontal direction. As shown in Table 1.1, the coordinate changes of the login button in different time periods are described. Fortunately, you don't need to manually design this process, or even manually write a linear gradient method, because iOS has already integrated this function for us in the UIView display layer. iOS not only integrates the linear gradient method of animation in the UIView layer, but also the acceleration, deceleration and complex animation change time functions and motion path functions of animation have been integrated for everyone, so you only need to learn how to use these rich APIs That's it, and this function can be implemented in just a few lines of code.
　　Table 1.1 QQ icon movement effect under 6S: QQ icon x and y coordinates change relationship with time
Picture description

3. At the end of
　　the animation, no new callback event is triggered after the animation effect ends, but the last position of the current login button is updated, so the picture finally stays in the middle of the view layer.
Click to read the full text: http://click.aliyun.com/m/9555/