Material Design Animation_html/css_WEB-ITnose

Authentic motion Real motion

Movement flows gracefully The form describes spatial relationships, functions and purposes.

Mass and weight: Mass and weight

In the physical world, for an object to move, a force must be exerted on it On it. The intensity and duration of the force determine the acceleration or change of the direction of motion of the object. Even the most rapid start and end do not happen instantaneously, because the acceleration or deceleration of an object takes a certain amount of time. Therefore, When animations have abrupt beginnings or ends, or abrupt changes in direction, they can look unnatural.

Motion in material design should be as elegant as possible without losing elegance, simplicity and beauty. Close to realistic physical motion and real-world behavior.

Natural acceleration and deceleration

Changes in acceleration and deceleration should change smoothly over the duration of the animation.

For a specific purpose, to attract attention to an object, or to add features to an animation, you can change its acceleration at the beginning and end.

Asymmetric acceleration and Slowing down creates a more natural and pleasant motion.

When acceleration and deceleration are not smooth, the motion will appear mechanical, and abrupt changes in speed and direction will look jarring and draw attention. .

This is why asymmetrical curve changes are better than linear changes. Linear changes always have abrupt inflection points, so linear changes should be avoided.

Entry and Exit

Changes in the speed and direction of an object draw the user's attention.

An object changes speed as it enters and exits the frame , indicating the distance it moves.

For example, if an object slows down when exiting, it will attract attention, implying that it will stop not far from the outer border of the picture frame.

Especially , when making transition animations, you need to consider which part of the entrance or exit should get the most attention. A nearly constant speed should be used at both the entrance and exit to reduce attention.

Do not Speed ​​up when entering and slow down when exiting. This will attract a lot of unnecessary focus and distract the user.

Make adjustments

Not all objects All move in the same way. Lighter or smaller objects can move faster because they require less force, while larger or heavier objects take more time to accelerate.

Use Curves type of motion, avoid linear segmented paths. Find the motion characteristics that best suit the object, and express them accordingly.

The curve represents a behavior over time within a specific range of values. Change. Find the curve that best fits the motion you want to describe.

Responsive Interaction Responsive Interaction

User Input

Touch, sound, mouse, and keyboard are equally important user input.

UI elements should all look touchable, and visual and motion cues should promptly acknowledge user input, and should animate in a way that looks like it is being directly manipulated.

Surface reaction

After receiving the input event, the system should provide instant visual on the touch point Confirmation clues, such as: where the finger clicks, the mic of the voice input, the appropriate field of the keyboard click.

The core visual mechanism to express this contact is: "Click Ripple", that is, "Touch Ripple".

The device expresses a click event method and persistent event, and can also be used to express other dynamic variables, such as volume or click pressure.

Best practice: From Starting from the input contact point (such as the contact point of the fingertip or the icon of the sound mic), the visual response spreads radially (radially, radially).

Material response

In addition to ink-like surface reactions, materials can lift up when clicked, indicating an active state.

By clicking, users can generate new materials, or Convert existing materials, or manipulate materials directly by dragging or swiping.

Materials can be resized linearly or radially.

Display animation during state transition: http://developer.android.com/training/material/animations.html#ViewState

Origin: When triggered by the user When a new material is generated, it should start from the input point and grow in size. This establishes a connection between input and generation.

Click to raise: when When a card or a detachable element is activated, the card should rise to indicate that it is in an active state.

Specify the height for your View: http://developer.android.com/training /material/shadows-clipping.html#Elevation

Radial Action: Radial action

should add visuals to user input Reactions make it clearer .

The visual ripple of ink spreading out from the input point is a radial behavior.

Input events are visualized: Input events The connection to the on-screen event should be visually bound. For touch events or mouse, this occurs at the point of contact. For sound, it is the microphone icon. A touch ripple identifies the touch event. The position and time also indicate that the click input was received.

Connect input and behavior : The transition or behavior triggered by the input event should be connected with Input events have visual connections. Ripple reactions near the epicenter occur faster than reactions far away, such as: 1. A series of content changes: many pictures appear or disappear; 2. A series of material movements: cards move in or out Screen.

Use the reveal effect: http://developer.android.com/training/material/animations.html#Reveal

Meaningful transitions Yes Transition of Meaning

Motion design can effectively guide users’ attention in both ways to inform and delight.

Using motion can: Allow users to smoothly transition between navigation contexts , explain the arrangement of elements on the screen, and strengthen the concept of element inheritance system.

Visual continuity Visual continuity

Between two visual states Transitions should be clear, smooth, and effortless.

A well-designed transition tells the user where to focus their attention.

Transition Type And behavior:

Incoming elements: Newly generated or newly converted items are introduced or re-created.

Outgoing elements: Elements that are no longer relevant to the context are removed.

Shared elements: Elements present during the transition, which can be tiny (an icon), or dominant (a gallery image that slowly grows to take up the entire screen).

Custom Activity transitions: http://developer.android.com/training/material/animations.html#Transitions

Notes:

When designing animations , pay attention to the following aspects:

1. Guide the user's attention. Where should the user's attention be directed? What elements and movements can achieve this purpose? During the conversion process, incoming, outgoing, shared How should elements be emphasized or de-emphasized?

2. Visually connect transitions. Create visual connections between transition states, either through color or persistent elements.

3. Use Precise Movement. Consider how to move a specific element to add clarity and joy to a transition.

Hierarchical timing

When building a transition When doing this, pay attention to the order and timing of element movement. Make sure the movement supports information inheritance relationships by establishing a path for the line of sight to convey the most important content.

However, this is not a simple formula to say the most Important things move first, least important things move last.

Time to transform elements should flow smoothly, avoiding a disjointed feeling.

Consistent choreography

The elements in the transition should move in a coordinated manner. The path the elements take should be meaningful and orderly. Accidental movement will distract attention.

When the elements in the transition are coordinated, it will Help users better understand the application.

Use curved motion: http://developer.android.com/training/material/animations.html#CurvedMotion

Best Practice:

1. Try to avoid linear paths. The exception is when movement is restricted to an axis, or when movement is toward or away from a point.

2. Keep directional elements moving during transitions Consistent. Avoid conflicting motion and overlapping paths.

3. How deeply do elements move and why?

4. If all moving elements follow their paths on the screen, Will it look nice and orderly? Can it paint a clear picture of where to look?

5. Emphasize the spatial relationships between elements through consistent movement in and out.

Delightful details

Animation can exist in all elements of an app, regardless of size, from a detailed icon to a key transition and actions.

All elements work together to build a watertight experience and a functional and beautiful app.

The most basic use of animation is during transitions , but an app can really please users if it can use animation in small places.

A menu button that can be turned into an arrow or play button, controls a smooth transition, and has two functions at the same time: Notifying the user, it also makes the app itself full of surprises and design at this moment.

References

Material Design Animation: http://www.google.com/design/spec/animation/authentic-motion.html