The motion system
source link: https://material.io/design/motion/the-motion-system.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Transition patterns
Material Design’s motion system is comprised of four patterns for transitioning between components or full-screen views. The patterns are designed to help users navigate and understand an app by reinforcing relationships between UI elements.
The transition patterns are:
- Container transform
- Shared axis
- Fade through
Selecting a pattern
Consider the following when determining which transition pattern is appropriate for a given use case: Is a persistent container part of the transition? Containers are...
Consider the following when determining which transition pattern is appropriate for a given use case:
Persistent containers
Is a persistent container part of the transition?
Containers are shapes used to represent enclosed areas, such as buttons, lists, card surfaces. If there’s a container that’s a persistent element in the transition, choose the container transform pattern.
The container transform pattern is for persistent containers, such as a FAB that transitions into a sheet, or a list item that transitions into a detail page.Relationships
Is there a spatial or navigational relationship between UI elements?
If the elements in a transition do not have a persistent container, there may be a spatial relationship to emphasize, such as elements in a vertical or horizontal layout. Or, there might be a navigational relationship between elements, such as moving between peers or between levels in an app. If a spatial or navigational relationship exists between elements, choose the shared axis pattern.
The shared axis pattern can be applied to UI elements with a spatial or navigational relationship, such as forward and backward navigation in an onboarding flow.When a relationship between elements is insignificant or does not exist, the fade through pattern is better suited.
The fade through pattern can be applied to UI elements without a strong relationship to each other, such as destinations in the bottom navigation.Entering and exiting
Does a UI element enter or exit the screen?
Oftentimes a UI element simply needs to enter or exit the screen. For entering or exiting elements, the fade pattern is best suited.
The fade pattern can be applied to UI elements that enter or exit the screen, such as dialogs.Container transform
The container transform pattern is designed for transitions between UI elements that include a container. This pattern creates a visible connection between two UI elements.
By seamlessly transforming one element into another, the relationship of the two elements is reinforced. For example, when a card transforms into a detail page, the user's focus is directed to identify that the detail page is an expanded version of the card.
Examples of the container transform (in regular timing and slow motion):1. A card into a detail page
2. A list item into a detail page
3. A FAB into a detail page
4. A search bar into expanded search
The container transform pattern can also be applied to transitions that occupy only part of the screen, and do not expand into a full-screen view.
1. A FAB into a menu
2. A FAB into a media player
3. A FAB into a sheet
4. A chip into an expanded chip
Specs
The container acts as a persistent element while its dimensions, position, and shape animate in tandem during the transition. The contents of the container are...
Container transform
The container acts as a persistent element while its dimensions, position, and shape animate in tandem during the transition. The contents of the container are pinned to the container's top edge and scale to match the container's width as it transforms. Additionally, a fade is used to sequence outgoing and incoming elements.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Container transform: fade through variant
Using a fade to sequence elements might expose overlapping and partially transparent frames during the transition. In these cases, a fade through can be used to minimize the appearance of overlapping frames. With a fade through, outgoing elements completely fade out before incoming elements fade in.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Shared axis
The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.
For example, when tapping next in an onboarding flow, both the outgoing and incoming elements transform horizontally in unison. By moving in the same direction, elements are perceived to be related to each other.
Examples of the shared axis pattern:1. An onboarding flow transitions along the x-axis
2. A stepper transitions along the y-axis
3. A parent-child navigation transitions along the z-axis
X-axis
X-axis transitions reinforce horizontal layouts or peer navigational relationships amongst UI elements. Elements transform in unison along the x-axis.
Y-axis
Y-axis transitions reinforce a vertical layout or a peer navigational relationship between UI elements. Elements transform in unison along the y-axis. For example, moving between steps in a vertical stepper.
Z-axis
Z-axis transitions indicate moving one level upward or downward in an app’s hierarchy. The elevation of each element transforms in unison, moving forward or backward along the z-axis.
Specs
In the shared axis pattern, outgoing and incoming elements share the same horizontal (x-axis), vertical (y-axis), or elevation (z-axis) transformation. Additionally, a fade through sequences...
Shared axis
In the shared axis pattern, outgoing and incoming elements share the same horizontal (x-axis), vertical (y-axis), or elevation (z-axis) transformation. Additionally, a fade through sequences the outgoing and incoming elements.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Shared axis: fade variant
If the default shared axis transition creates an unwanted flashing effect when elements fade through, use a fade to create a more seamless transition. A fade can work well particularly when using the z-axis transition pattern.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Fade through
The fade through pattern is used for transitions between UI elements that do not have a strong relationship to each other.
For example, transitions triggered by tapping a bottom navigation bar use the fade through pattern. The fade through is the best choice because destinations in the bottom navigation are often grouped into major tasks that may not relate to one another. Additionally, the fade through pattern does not mislead users to think they can swipe horizontally between destinations.
Examples of the fade through pattern:1. Tapping destinations in a bottom navigation bar
2. Tapping a refresh icon
3. Tapping an account switcher
Specs
In a fade through transition, outgoing elements first fade out. Next, incoming elements fade in while scaling in overall size from 92% to 100%. The...
Fade through
In a fade through transition, outgoing elements first fade out. Next, incoming elements fade in while scaling in overall size from 92% to 100%. The element scaling starts at 92%, rather than 0%, to avoid drawing excessive attention to the transition. The scale animation is applied only to incoming elements in order to emphasize new content over the old.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
The fade pattern is used for UI elements that enter or exit within the bounds of the screen, such as a dialog that fades in and out of view from the center of a screen.
1. Dialog
2. Menu
3. Snackbar
4. FAB
Specs
When entering, elements use a fade and scale in overall size from 80% to 100%. The scale animation starts at 80%, rather than 0%, to...
When entering, elements use a fade and scale in overall size from 80% to 100%. The scale animation starts at 80%, rather than 0%, to avoid drawing excessive attention to the transition. When exiting, elements simply fade out. The scale animation is only applied to entering elements. This places emphasis on new content (entering elements) over old content (exiting elements).
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Fade: scale anchor point variant
By default, entering elements scale from their center point when fading in. In a variation on the default behavior, the scale anchor point can be repositioned from the center of an element to another location within the element.
For example, when an overflow icon (the parent component) triggers a menu (the child component), the menu’s anchor point can be positioned at the top right corner of the menu so that it appears to scale from the overflow icon during a transition. This variation visually unites the two components.
Interactive tool: Drag the pink playhead to scrub through the timeline and inspect the motion design. Click on any row in the timeline to see more details. Use the tabs above the timeline to switch between related specs.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK