Physical laws of dynamic design

As a powerful tool to enhance the sensory effect of web pages, the dynamic effect has been fully flowering in various types of Web pages, and how to make the user feel comfortable by natural flow. I'll talk to you today about the physical laws of dynamic design and how it is applied.

First, a master Jin Yu, Disney animation master Grimoux Netevick once said:

Animation production and dynamic design is the essence of the same, we need to create a "visual reality" for users, that is, the action is credible, we need to obtain is not to copy the offline scene of realism, but "credibility", to let users perceive this action is set up. Here, we are going to move out of the physics of the tall!

Physics four basic forces-gravitation, electromagnetic interaction force, weak interaction force, strong interaction force, we can perceive in real life is basically derived from gravitation (the other three kinds of force we can not analyze what). In other words, the user's experience in real life is based on the "weight" of the object. To analyze gravitation, we have to turn out Newton's big textbook chapters.

(i) Newton's first law

According to Newton's first law--the law of inertia, any object should be kept uniform motion or stationary until the force forces it to change the state of motion, and plainly, that is, the motion of an object without any force, its velocity and direction are unchanged, expressed in a formula:

With the above formula, we can draw the displacement-time curve of uniform motion:

In order to realize the transition effect, we must simulate the displacement-time curve of the page block, and for the segmented curve obtained by the motion disassembly analysis, we can use the basic tool of the computer graphic image modeling-Bezier curve to draw out, call CSS3 The Bezier plot function in the animation-timing-function attribute Cubic-bezier can easily be used to simulate motion trajectories.

For example, the Bezier curve shown can be defined with four points, where P0, P3 are fixed points, their coordinate values are the default [0,0],[1,1]. P1, P2 Two point is used to control the shape and curvature of the curve, the pen tool in PS The anchor point has the same function, the coordinates of the two control points are required we through the Cubic-bezier (x1, y1, x2, y2) custom, the range in [0, 1]. For uniform motion, set the motion time to 1s and simulate the motion by Cubic-bezier as follows:

Linear animations are the same speed from beginning to end. Effect of banner Zone switching action applied to Web pages (dynamic graph needs to be loaded):

The feeling is not very natural, because of the existence of air resistance, the uniform motion of the program simulation is difficult to realize in the real life, so it is very difficult to establish the trust for such a user's seldom perceived movement. This uniform motion is also something we need to avoid when we are working on a dynamic design. Considering the need to analyze the force of the object motion, we use Newton's second law to dismantle the motion.

(ii) Newton's second law

According to Newton's second law--the acceleration of an object is proportional to the force of the object, inversely to its mass, and the direction of acceleration is the same as the direction of the force. When an object continues to be subjected to a constant force, it will do a uniformly accelerating linear motion, expressed in a formula:

Draw the displacement-time curve of the uniformly accelerating linear motion:

The simulated motion through Cubic-bezier is as follows:

Ease-in animation starts at low speed, accelerates gradually, and the end state is the fastest. Application effect:

The starting state conforms to the physical law of the movement of the stationary object, but the closing state is not quite consistent, and the speed of the object before the movement is the fastest in the whole motion process, which is illogical. If we let the final state conform to the laws of physics, then we need to slow down the object, the formula of the uniform deceleration motion is as follows:

Draw the displacement-time curve of the uniformly accelerating linear motion:

The simulated motion through Cubic-bezier is as follows:

Ease-out animations start at high speed and end at low speed. Application effect:

The simulation is the process by which an object naturally slides and stops slowly after receiving a short duration of thrust action. The use of this effect in this application is more appropriate, banner pictures just start to switch motion, it is necessary to use a relatively fast speed to attract the user's attention "Hi!" Here's a new message! "In the near final position, you need to slowly slow down because the user has shifted their attention to the new banner map, and the user needs to be slow down to look at the content and get information.

If you want to let the banner picture appear softly in the starting stage, you can ease in and out together to use the displacement-time curve:

The simulated motion through Cubic-bezier is as follows:

Ease-in-out animation starts at low speed and ends at low speed. Application effect:

The switching effect is very soft, which is what we often call "ease in and out."

(iii) Giving materials-speed, deformation and feedback

Good action after satisfying the basic physical principles there are many "materials" on the details of the supplement, mainly the speed, deformation and feedback of the three aspects. If we want to add a little weight to the above case, that is, to make the object look "quality", you can do a little bit of speed on the article, adjust the motion curve;

Simulate motion by Cubic-bezier:

Ease animation starts at low speed, the animation starts at low speed, then accelerates and slows down before it ends. Application effect:

We can use this kind of acceleration of the start state and the end state absolute value to make motion "sticky feeling", which can make the moving block produce more realistic interaction effect. But on the other hand, the acceleration and deceleration process of non-equivalence may cause the dynamic effect to produce a muddy, not simply feel, the specific application or specific circumstances specific analysis.

To do the disassembly analysis of the object motion process after the simulation, we can also take some small thoughts on the shape of the moving object, through the object deformation and motion of the feedback effect can give the object "material", to see a few good web dynamic effect cases.

The use of ease-out parameter settings, so that all elements quickly into the user's eyes, and slowly reach the target location, animation smooth nature.

The effect of stretching the page is achieved by varying the speed difference of the block, but looking closely at the movement of each block, we find that there is actually no deformation, and that clever speed changes can make the whole page switch lively.

Through the setting of the deformation, so that the different heights of the column shape will be very flexible, look at the Web page performance is "Top" data, for the histogram to give the elastic effect is also very consistent with its performance data "emotion", the entire page will appear interesting and vivid.

With the bounce effect of the dropdown box the "curtain" design of the real block, motion feedback can also give the material to the page elements.

In this paper, the main analysis of the case focused on the use of the most widely used linear motion, the basic dynamic effect of other actions, such as scaling, rotation, opacity and other effects of the change, its nature is interlinked, combined with the physical Law analysis practice can make a natural smooth effect, summed up the application process: 1. This paper analyzes the movement of concrete content chunks, and draws the motion-time curve of the block motion with the demand itself. 2. Disassemble the curve and use the Bezier curve to simulate the motion. 3. Use speed adjustment, material shape change, and motion feedback to give the block a rich, dynamic detail.

Thank the more students technical support, sent to the script Portal: http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp http://cubic-bezier.com/#.63,0,1,1

Physical laws of dynamic design