Teach you how to make the interface animation natural and smooth

Editor's note: Flattening makes the interface animation more and more popular, but want to make natural smooth dynamic effect, understand the software not yet, you have to learn point function. (Hey, don't run!) Tencent's Steve classmate directly from the product set out, talk about how to use scientific methods to make animation more natural. Language is easy to understand, the end of the text attached to the small surprise, study.

With the development of hardware and software technology, interface animation is ubiquitous in our daily life. Desktop software, mobile apps, cloud services, and so on, looking around, I'm sure you'll find them.

In the product animation is not the more the better, it may not be more dazzling the better. Different product types have different requirements for animations. The common animation mainly undertakes to explain to the user the relationship between interface and interface, the relationship between elements and elements, and the enhancement of specific elements.

If you are concerned about the interface animation, you may have seen the following animation curves. Excerpt from http://easings.net/

They describe the relationship between the degree of animation change and time. By using the principles behind these animation curves, you can make the animation look more realistic.

It says here we want to make the interface animation more natural. How to be natural? As long as the objective physical laws and human visual experience, animation will look real natural.

Why do you want to talk about animation functions? I believe many designers see the following article will feel too boring.

So we go back to the product development process, in the product, there are several common animation implementations:

1. The designer draws frames by frame, and the development students realize sequential/circular playback logic.

2. The designer provides the animation resources file such as (video, Flash, GIF), the development schoolmate embeds the resource into the product.

3. The designer provides the animation form, the parameter and the element, the development schoolmate completes the animation realization, like: html5/css animation.

Text to the third form, to help designers understand the animation behind the scientific knowledge, can have specific parameters with the development of students to communicate.

If you are familiar with the motion formula in the physics textbook, skip the first part.

Motion animation

Let's start with the simplest motion animations. Our objective physical law still has to start with Newton's second law. F=ma, if you don't understand this formula, it doesn't matter.

Please allow me to be less scrupulous about terminology. The popular point is that the motion animation responds to the change and the object itself that executes the animation. If the object you want to represent is a heavy one, then their initial animation response/parameter changes will be slower. Conversely, the object is lightweight, then its initial animation response/parameter changes will be relatively fast.

You can see from the diagram that if the same operation and move the same distance, the lighter time spent the shorter.

Damping Animation

In reference to damping, three concepts need to be introduced: critical damping, over damping, and less damping.

Critical damping

Some upscale doors or cabinets in life. Their mechanical damping is designed to be as close to the critical damping as possible in order not to cause too much noise during the opening and closing process. This process is the easiest to accept, without any external interference. Over damping and damping, usually allows you to feel an invisible hand that hinders or facilitates movement.

Over damping

It is literally easy to understand that damping is great and hinders the development of movement. Some automatic doors or elevator doors in the closed process, in the last paragraph often takes longer. In addition, the recovery of the memory pillow process is also over damping.

Less damping

The damping is not enough, then the oscillation characteristics are formed. Some spring doors in life, in the process of closing, will swing many times, and eventually tend to close.

Do a relatively delicate interface animation, if the pursuit of rational, you can split the results of the animation into three stages. Start, run, finish. Designers need to spend more time thinking about the start-up and finishing process.

· Starting stage: Embodies the strength, quality, environment, can show the lightness and thick material.

· End stage: reflect the quality, speed, environment. Damping is usually manifested at this stage.

As an example

Please pay attention to the start-up and finishing phase.

The animation curve only makes the feeling, May and the actual animation has the discrepancy.

Breathing animation

Breathing animation, often used for the reminder of interface elements.

For this animation, the designer's most intuitive impression is flashing. In the process of implementation, the word flashing will be given a different understanding.

· Designer's eyes flashing: "Fade-> gradually hidden-> fade-> fade";

· The blink of an engineer's eye: "Show-> hidden-> show-> hidden";

How to make the animation more delicate, lies in how to fade and fade the process of how to describe more carefully.

For the earliest fade, fade animation, I first thought of trigonometric functions.

By looking closely at this function, you can see that his feature is that in a cycle it is the process of starting up and slowing down. It is suitable to develop and utilize the animation effect of simple code implementation.

Interested students can use the prototype to feel. Do flicker animation, use trigonometric functions can actually satisfy most of the scene.

When I try to animate it, I look at it as a breathing function, and I always feel that it's not natural. It looks like "shortness of breath".

Let's analyze the respiration function.

Why does it look cramped? Please reader now try to take a deep breath and experience it. You will find that in our inspiratory phase, the lungs will soon reach full state, and the exhalation phase can last for a long time. This is the proportion distribution in general.

Fused into trigonometric functions, the beginning of the gradual increase and closure of the slow introduction. Thank you, Don, for providing a complete function.

The cycle of this function is 6, and the peak appears at 2. The whole change begins and ends with a gradual transition.

K=1/3,t=6, n={1,2,3,...}

Let's feel it.

I used some spare time to try it on the Arduino hardware. You can take a look at the video. I thought fade, fading animation is this kind of:

Video address: Simple triangular function of the breathing lamp

In fact, it should be like this:

Video address: Breathing lamp with respiration function

In addition, use CSS3 to make a natural fluent interface as awesome!

Other

In addition to the description of the objective rules in the process of animation change, the restoration of the user scene can also increase the sense of nature.

such as the checkbox for this site. In our daily life, faced with the paper options, we will choose to smear the way to choose.

Or delete it like this

More effects, you can access → dynamic checkbox.

Writing at the end of the gadget

If you use a MAC partner, Apple provides a tool Grapher to draw a function image. The functions in this article are all drawn by this tool. Interested students can try to use a bit.