New material DESIGN Official Action Guide (iii)

Sports

The Material design's dynamic effect is similar to the force in the real world, like gravity.

the motion of an object in the screen

The movement of the object in the screen between two points is a natural, sunken arc along the way. Standard curves are available for all movements on the screen.

Arc Upward Motion

In the real world, the upward movement of objects requires overcoming gravity. Elements move upward in the screen, which is also the need to overcome an acceleration, a slower upward motion.

Correct: When the object is moving upward diagonally, the gentle start rises and stops sharply at the end point.

Error: Do not violate the laws of physics: it is unnatural to ignore gravity when the object is moving upwards.

Arc Downward Motion

In the real world, falling objects are subject to the acceleration of gravity. In the screen, the object should move down a bit more quickly.

Correct: When the object moves downward diagonally, the descent begins sharply and then gently stops.

Error: Do not violate the laws of physics: do not forget the downward gravity when moving downward.

Non-Arc motion

Do not let an object move along an arc when the object is moving along a horizontal or vertical axis. The simplest of these movements, the object can move at a relatively fast speed.

Correct: Keep the linear motion of the single axis.

Error: Do not allow an object to move along an unnatural arc in a horizontal or vertical direction.

When an object enters or exits the screen, it should also move along a single axis.

Right: The object enters the screen along a straight path, so you can see the entry point clearly.

Error: Do not follow the curve when entering and leaving the screen, which makes it unclear where the entry point is.

movement of objects into and out of the screen

Independent movement

Object as a separate element, entering the exit screen does not affect the position of other elements on the screen.

Go to screen

The object enters the screen with a deceleration curve (see duration and ease), enters at maximum speed, and slows down slowly.

Leave the screen permanently

The object will permanently leave the screen with an accelerated curve (see Duration and ease section) and quickly leave the screen in a very short time, as they no longer return to the screen, so users should be less concerned about it.

Correct: The object will enter the screen with a deceleration curve should not affect the location of other objects on the screen. On mobile devices, this movement is smooth and lasts around 225ms. The same object uses the acceleration curve to leave the screen permanently, and on the mobile device, it lasts about 195ms.

Error: Do not use standard curves in either of these cases (see Duration and ease section for details). When an object enters the screen, the slow acceleration process attracts unnecessary attention from the user (the user's attention should be placed at the last point of the stay). Slow deceleration is also unnecessary when an object leaves the screen, because the end of the object's motion is invisible outside the screen.

Leave the screen temporarily

The object temporarily leaves the screen should use the sharp curve (see the duration and the ease of the article), the occurrence point and vanishing point distance should be very close, so that they can return to the screen at any time.

Objects leaving the screen are returned from the original path, and the motion of the object should use the sharp-turn curve when it returns, using the deceleration curve when returning. On mobile devices, this animation usually lasts around 300ms.

When an object leaving the screen returns from another path or permanently leaves the screen, the motion of the object should use the acceleration curve if there is a return, using the deceleration curve.

Associated Motion

And the other elements on the screen have linkage to enter or exit animation, should use smooth easing curve, so they can minimize interference, avoid too eye-catching, vigorous motion.

The standard curve applies to the associated multiple objects entering the exit screen. The standard curve of motion of multiple objects will be slightly longer than the time of independent objects.

Correct: The movement of the floating button is affected by the cards entered from below, and the floating buttons and cards should all use the standard curve motion to maintain smooth start and stop animations. On a mobile device, the animation lasts about 300ms.

Error: The floating button moves up and down using the acceleration or deceleration curve, which can give the person a sense of sudden upward or downward movement. Such a move is hard to accept and experience is compromised.

deformation of the material

Objects under material design can be vividly displayed: stacking, splitting, changing shape and size.

the deformation of a rectangle

When the object changes shape and size, the width and height of the motion curve is asymmetric. This change is based on the intrinsic or extrinsic elements near the object.

All the changes are visible on the screen, such as the following examples, using the standard curves (see Duration and ease section for details).

Width and height changes

When the object expands or shrinks, use a symmetrical or non-paired width-height change.

Asymmetric change

Refers to the width and height varying at different rates. For changes in multiple objects or locations, it is appropriate to use asymmetric changes.

Asymmetric change

Object enlargement: Change the width first, then change the height. Object reduction: Change the height first, then change the width.

A symmetric change is a change in width and height at the same rate. Suitable for the movement of single elements along a single axis.

Symmetry change

This way of changing the width and height while reducing the animation details is ideal for simple shape changes. The duration of this change is slightly shorter than that of asymmetric variation.

When a group of objects expands out of sync, the part that contains content (such as text or images) changes in size at a constant rate, preventing unnatural stretching. For more information, please refer to the section on dynamic effects.

Some special content, such as a full-screen width image, is changed at a constant rate, and the change in the container that hosts it (for example, a larger card) is carried out in a different way along the motion curve.

Containers that contain bleeding content, such as images that exceed the bleed line, can be expanded synchronously.

Radial Deformation

Radial change is the result of symmetrical, circular visualization from the user's touch point. It is usually used on rounded objects to make the circle into other shapes.

Correct: The radial change should be used on a circular object to make the circular object square, or create a new object at the touch point.

Error: Do not use a radial change in the variation between two square objects.

Error: Aspect extensions do not sync (the middle will become an ellipse).

Error: Do not change the complex shape radially.

The change center point of the deformation can be positioned before the object changes, or in the position after the object has changed.

In the process of expansion, the movement of the floating button is followed by a downward arc, which eventually becomes a card.

The center point of the transform is maintained at the center of the floating button, and the amplitude is not expanded much.

Merge & Split

Merge

In material design, objects can be combined with other objects and can be segmented into many blocks. When two objects approach each other, the edges meet and then overlap, and the final one is merged.

Segmentation

The object splits into multiple fragments, and then the fragments begin to detach motion.

Shadow

The shadow of an object that is split is not affected by any other segmented object.

New material DESIGN Official Action Guide (iii)