Making elastic animation with AE Bezier curve

Before using Bezier curves to make elastic animations, let's understand the principle of Bezier curves to understand what animation works in accordance with physical motion laws.

Android I started in the dynamic implementation of the method has a leap to improve, scattered animation effect is not unified theoretical support, and finally after the Android L Bezier Curve and SVG animation universal use, making the Android original system of dynamic design become a big highlight of the publicity.

Here's a little bit about Bezier curves. Many people may sound like a special professional word, but in fact, the students who have studied the design or have the basis of drawing software can understand the principle of the Bezier curve next.

The explanation in Baidu Encyclopedia is that the "Bezier" tool is called "pen tool" in Photoshop, translated as "Bezier tool" in CorelDRAW, and is called "brush" in fireworks. It is a professional tool for "drawing line" modelling. Of course, there are a lot of tools to do the work of drawing lines, such as the common Photoshop line, airbrush, brush tools, fireworks in the line, pencil and brush tools, CorelDRAW in the free pen, hand-painted tools and so on.

Two pictures to understand how to draw:

How to read Bezier curves? Bezier curves can be considered as displacement curves (position and time relationship) in development implementations.

The above curve is a uniform curve, which means that the motion of an object moves from start to stop at the same speed.

It is known to all the major ROM vendors or app companies on the move that they are claiming to be in accordance with the principles of physical motion, in line with the user's psychological expectations, restore life scenes, feelings, more real and effective animation effects, etc., these implicit statements into the development of language is to draw a comfortable movement curve. So what kind of curve is in accordance with the laws of physical movement, real effective?

People think of throwing a stone from the hand, throw out the moment is not an acceleration process, that is, the speed from 0 to rise, and then faster, it will fall when the speed began to reduce, the final fall speed of 0. The trajectory of the stone movement is actually a complete parabola (i.e. the velocity curve):

We convert the velocity curve to the displacement curve, and this curve is what we need:

This curve is inferred from the real life scene, the concrete parameters are vague, but we have learned the true physical motion law: Object Motion is a process of accelerating from stillness to stopping deceleration.

In the ordinary work we are through the animation production software (such as AE, Flash) to adjust the curve in the end we can see the animation effect:

How do you translate this shift curve into a development language? The method for obtaining valid parameters is this: (Take PS as an example)

Create a new 1000*1000 pixel artboard in PS (for a good calculation of rounding, as long as it is a square on the line, the animation software in the curve screenshot into the built PS artboard, the beginning and end of the curve and the artboard in the lower left corner and the upper right corner, so that a square in the formation of a displacement curve:

Then in the drawing software to copy this curve, adjust the node when the fulcrum coordinate is the development of the required parameters (in the lower left corner of the artboard as the origin (0,0), the upper right corner of the end (1,1). The coordinates of the yellow point in the figure above are the starting point (0.26,0.05), the end point (0.26,0.97)

This curve is the simplest Bezier curve, in the drawing software by adjusting the beginning and end of the node can get this curve, more complex Bezier curve is composed of multiple nodes, which is more complex function formula. Time is limited, the above is in the working hours only two hours of work out of the experience to share to everyone, if there is not accurate place please a lot of exchanges. The following sections describe different curves for different needs, and the difference between Android and iOS curves.

Flexible animations are often seen on mobile devices, such as the point open the Image Amplification process, dialog box rebound effect, and so on, these animation effects with the principle of Bezier curve as long as you want to draw a curve, the corresponding parameters provided to the development can be easily realized, and can be very convenient to modify the effect.

What is the principle of it?

In the previous chapter, we learned to draw a curve within a square that contains the relationship of time and displacement, and the normal motion curve is done in this square range, that is, from one point to another. Then the Jitter animation is the equivalent of the movement to the end of the car did not stop when the end of the target and return, so the corresponding jitter animation curve is beyond the scope of this square. The following figure:

According to the effect we want, in the animation software repeatedly, and then provide accurate parameters to the development can be almost 100% of the effect of the restoration of animation. The parameters at this time are definitely not in the range of 0 to 1, at least the jitter is over 1, as in the following diagram:

If the two-point adjustment is still not able to pull out the elastic effect you want, then we can add a point on the curve, but the corresponding development will increase the difficulty of implementation, is called the subsection implementation, this time we need to provide four points of the parameters and the middle of a point in the point of time. The following figure:

If you still do not meet your requirements, such as to a few times in the interface to bounce back to stop, then the curve is the following figure:

The combination of technology and art is the product of interface design, design is endless, continue to study and explore