In the current industry, the entire system of motion design is not yet mature; in terms of final presentation effects, motion effects may affect page performance, loading speed, etc. Therefore, when it comes to dynamic effects, many students may feel conflicted.
When we encounter problems, we first dismantle the difficulties. In my opinion, the difficulties faced in the process of dynamic effects can be divided into the following three types:
Difficulty in docking : Difficulty in docking is actually a difficulty in communication , which is also the focus of this article. Because interface animation is a new design pattern, there is no mature docking standard between development and design.
Difficulty in design : The dynamic effect of the interface is essentially the extension of the static interface in the time and interaction dimensions. The most commonly used interface design tools cannot yet design the timeline, and traditional dynamic design tools such as AE lack interactivity , it is difficult to design the interaction dimension of the interface with high precision.
Difficulty in implementation: The interface increases the time dimension. Research and development not only requires layout, but also controls the performance of each element in the time flow. In some cases, if sequence frames or Gifs are used, it is necessary to strictly control the size of resources, which increases in various aspects. development costs.
In response to the above points, I have summarized some more effective solutions in my daily work process. Although these solutions are not perfect, they can generally cover most situations in the engineering environment.
Communication between developers and designers is difficult. It is because there is no precise parameter to describe the dynamic effect. To solve this problem, we need to create an effective motion annotation system, which must do the following two things: allow designers to easily describe motion effects, and allow developers to accurately restore motion effects . The method for constructing this set of "labels" is described in the following two parts:
In fact, the design parameters involved in the interface animation are very simple, there are only three. No matter how complex the dynamic effect is, these three parameters are combined and spliced together:
Changes can be divided into four categories (as shown in the animation). These four types of changes basically cover all the movement modes of interface elements. As long as we accurately describe the amount of change of elements before and after the animation, the "change" can be accurately completed. The docking of this parameter.
For example, the green little dinosaur thrown out in the animation below contains the above four changes at the same time.
Its parameters that change back and forth in AE are as follows:
Then the state we need to record at this time (only changes are involved here) should be like this:
Displacement: X-axis 0
Rotation: 0 degrees
Displacement: X-axis 200px
Rotation: +180 degrees
It looks so much clearer. As a friendly designer, don't just take a demo and say "just follow the similar effect". In that case, it is estimated that most developers will only be confused.
The second key parameter is the duration, which, as the name suggests, is the duration of the animation playback. Whether the change is more or less, simple or complex, we need to determine the time of each change, the time is short and neat, and the time is gentle and gentle.
When marking, don't forget to mark the b2b data start time and end time of the animation clearly .
The curve describes the speed change when the object moves. If the change and duration are the essence of the dynamic effect, then the curve is the soul of the dynamic effect.
For a moving object, the same change, the same time, and different speed curves will make its dynamic effect rich in changes. Therefore, in motion design, the curve is also the part that designers pay the most attention to .
The most basic speed curves are linear (that is, the whole speed is uniform), ease in, ease out, and ease in and ease out: