Material motion
Why bother?: Motion provides:
How does material move?
To make a good transition
Without a motion
Duration & Easing
Why bother?: Motion provides:
- Guided focus between views
- Hints at what will happen if a user completes a gesture
- Hierarchical and spatial relationships between elements
- Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
- Character, polish, and delight
How does material move?
- Responsive: It quickly responds to the user input. Animations only take 150 ms ~ 400 ms to be completed. Otherwise, they may be too quick or slow.
- Natural: Follow the physics rule in the real world. At the point of starting or ending a motion, the acceleration is at its greatest (called 'easing'). Just like the real world, a material moving through a bit curved line to its destination seems more natural than a straight line.
- Aware: Material is aware of the user and other materials surrounding itself. Motion is determined with that awareness.
- Intentional: Motion should guide the user to the right spot telling the user what to do.
To make a good transition
- Make it quick
- Make it clear: Coherent animations of materials in transition in the same duration of time.
- Make it cohesive: Across the app, the speed, responsiveness, and intention of motions should be consistent.
Without a motion
- It may not be clear to the user what to do next.
Duration & Easing