The application techniques of animation in Web page design

With the development of soft http://www.aliyun.com/zixun/aggregation/6577.html > Hardware technology, the interface animation is ubiquitous in our daily life. Desktop software, mobile applications, cloud services now look back four weeks I'm sure you'll find them.

In the product animation is not the more the better, may not be the 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 how the animation changes in relation to 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 we follow objective physical laws and human visual experience, animation will look real and 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:

designers draw frames by frame, and develop students to achieve sequential/circular playback logic. The designer provides animation resource files such as (video, Flash, GIF), and develops students to embed resources into the product. 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.

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 start-up and finishing processes.

start-up 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. For instance

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 eyes flashing: "Fade-> fade-> fade-> fade"; the blink of an engineer's eye: "Show-> hide-> show-> hide";

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

For the first 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 function of respiration. 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.