TranslationThe details you need to know to do good animation

The most important thing in the design of dynamic effects is the control of time, time is very important. If you don't consider motion time, you're definitely not a qualified motion designer. Advanced animators are proficient in the rhythm, timing, speed, composition, structure, and dynamics of animation.

Now, in 2018, animation is finally incorporated into interface design, but many fall short of the mark. They are still relatively rudimentary in animation, and do not consider giving users a reasonable animation experience. There is a wealth of knowledge in classic animation, and we don't need to reinvent the wheel.

Animation grabs the user's attention. When b2b data you sit in a movie theater before watching a movie, you might notice the exit sign, the edge of the screen, the head of the person in front of you. If the film is very engaging, all distractions will disappear, and you will feel like you are in the film.

In other words, you don't come back to reality until some idiot around you looks at their Instagram notifications.

We usually notice things that are moving and then gradually ignore them when they are stationary. Movement grabs our attention, so we should think about how to use it.

Visual fatigue

It's not enough to just learn "Disney's 12 Principles of Animation".

A classic chasing reply

Junior motion designers tend to make everything overly active and show-stopping, and they don't want to waste a single keyframe, forgetting that it tires the eyes.

Here's an inappropriate example: the audience sits and the designer sets up a bunch of baits to try and show them off their hard-earned work. This is confirmed in communities like dribbble, where users excitedly like and retweet animations when they see them, because they have never seen such cool animations before. And in fact, the best animations should be invisible.

This is a classic bug we see in interfaces: the misuse of spring animations.

Dazzling interface elements

Our attention is pointlessly drawn to oscillating interface elements. , our eyes are focused on it because it takes a long time to see clearly. The interface looks suspenseful, and we're eager to end its throbbing.

Improved, control interface bounce time

If you reduce the exaggerated amplitude, the content on the element will be easier to focus on. This will be much simpler than the previous one, but in fact there will still be a more exaggerated buffer. But in fact, there is still room for improvement, and your own feelings are the most important.

Let's talk deformation

Clicking the button turns into a hamburger menu, then clicking it again turns it off, back and forth between the two forms.

Another case of pointless, bouncing transition hamburger menu. Even without the spring effect, it's quite an attention grabber. We don't need an exaggerated form to perceive a state change, and we don't need to make everything move.

Dazzling burger icon

Let's look at this animation in conjunction with the content, pay attention to where your own eyes see, have you noticed: After a big change in the content, the icon wiggles for a long time?

The most important content should be the button-triggered interface change, not the overly bouncing hamburger menu.

A more straightforward approach is to not change the icon at all. Instead, we can focus on using subtle animations to interact. This is not for eye-catching, but a guiding principle. This new button is characterized by a depression first, and then a quick rebound, which is natural and relaxed, emphasizing the feeling of pressing a button.

Beware of visual fatigue

Thinking about how to guide the user's eyes is very helpful for good animation. Imagine your eyeballs spinning in their sockets, moving quickly, accelerating, and decelerating. When you animate, you are actually directing the eye. Where do you need to emphasize? Where should the line of sight be?

More tracking requires more physical and mental investment, is it worth the visual fatigue in exchange for some exaggerated animation? There is a need to balance the nuances of motion and consider the best adaptability.

Rational vs Emotional

Follow your inner feelings, don't be trapped by those rigid rules, it's not black and white, such as some formula theories like IBM and Google, always remain skeptical.

Don't trust the data too much, trust your own eyes and feelings first. Some of the rules these days can be broken, good animation can give people a good experience, and you are the one who can create them.

Considering the meaning and purpose of each element you're arranging, it's not always good to animate strictly with rational data, and sometimes it just feels right.