[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003eIn driving mode, prioritize motion for essential communication like concepts, branding, and element relationships, ensuring it aids understanding without causing distraction.\u003c/p\u003e\n"],["\u003cp\u003eUtilize predefined motion patterns (crossfade, shared axis, vertical overlay, minimize/expand, and disruptive slide/fade) for consistent user experience across different in-car app interactions.\u003c/p\u003e\n"],["\u003cp\u003eBase motion design on standard easing principles, emphasizing smooth transitions that accelerate quickly and decelerate gradually.\u003c/p\u003e\n"],["\u003cp\u003eTailor motion duration to the specific action, with quicker transitions for closing or minimizing actions compared to opening or expanding them.\u003c/p\u003e\n"],["\u003cp\u003eMaintain a hierarchy of actions, allowing users to understand the relationship between primary and secondary actions through visual cues like scrims and partial visibility.\u003c/p\u003e\n"]]],[],null,["# Motion\n\n\u003cbr /\u003e\n\nMotion should appear sparingly in the driving context to express concepts, branding, and relationships between elements. It should only be used to help inform drivers without distracting their attention.\n\n**At a glance:** \n- Avoid distracting users with unnecessary motion\n- Use motion to increase users' understanding and build their proficiency\n- Make your motion language flexible enough for all relevant hardware\n- Use the recommended motion pattern for your situation\n\n*** ** * ** ***\n\nMotion patterns\n---------------\n\nTo support a consistent user experience across all apps, specific motion patterns apply to the following interactions:\n\n- Switching between apps\n- Switching between peer views\n- Extending an existing action\n- Minimizing and expanding an action\n- Disrupting an action\n\nThese motion patterns are based on [standard easing](https://material.io/design/motion/speed.html#easing), as described in Material Design, which places focus on a transition's ending by speeding the transition up quickly, then slowing gradually. \n[Easing\nMaterial Design guidelines on adjusting an animation's rate of change](https://material.io/design/motion/speed.html#easing)\n\n*** ** * ** ***\n\n### Switching between apps\n\nWhen switching between apps, use a crossfade transition, which fades one element into view while another element fades out. This transition depicts an exit from the current app while moving quickly into another one.\nThe crossfade motion switches the user quickly between apps\n\n#### Example\n\nA swift crossfade takes the user from a navigational app to a media app and back again\n\n*** ** * ** ***\n\n### Switching between peer views\n\nWhen switching between views at the same level of hierarchy in an app (also called peer views), such as tabs in an app bar or songs in a playlist, use a [shared axis](https://material.io/design/motion/the-motion-system.html#shared-axis) transition. This transition's horizontal, side-to-side movement reflects the state of staying at the same level within an app.\nA swift crossfade takes the user from a navigational app to a media app and back again\n\n#### Example\n\nThe shared axis motion pattern when switching from song to song in a media app reinforces that both songs are in the same playlist\n\n*** ** * ** ***\n\n### Extending an existing action\n\nWhen a user is in the process of viewing or taking an action and then takes a secondary, related action, that secondary action should be introduced with a vertical (either up or down) motion. This secondary action is displayed on a full-screen overlay, with a scrim background, in front of the primary action. The presence of the primary action through the scrim reinforces that the user is still in the midst of performing that action.\n\nThe secondary action is then closed in the reverse direction of the opening motion. This reverse motion should take less time than the original motion, since the action is done. \n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration) \nHere, the secondary action rises up from the primary action on an overlay, while the primary action remains partially visible behind the scrim\n\n#### Example\n\nSelecting the overflow button on the media control bar causes it to expand vertically on an overlay with a scrim background\n\n*** ** * ** ***\n\n### Minimizing and expanding an action\n\nOngoing actions can be minimized into a smaller format. This smaller format allows the user to multitask while the ongoing action runs in the background.\n\n- **Expanding**: When the user taps on a minimized action, it expands in size and fills the full screen, using a fade-in transition.\n\n- **Minimizing**: When minimizing an ongoing action, use the reverse of this motion. The minimizing motion should take less time than the expanding motion, since the user is leaving this action.\n\n[Duration\nMaterial Design guidelines on how long transitions should take](https://material.io/design/motion/speed.html#duration)\nThe minimized action expands to full screen as it fades in on top of the current action\n\n#### Example\n\nThe playback FAB (floating action button) expands into the full playback view then contracts via the down arrow\n\n*** ** * ** ***\n\n### Disrupting an action\n\nWhen a short, optional action needs to appear suddenly in front of an ongoing action, it should slide (up or down) from the edge of the screen, with a partial scrim. Alternatively, it should fade into the middle of the screen, with a full scrim. Start the motion from the location closest to where you want the new action to appear.\nWhen the disruptive action should appear near the top of the screen, slide it in from the top with a partial scrim\n\n#### Example\n\nIn this Android Auto example, a notification about an upcoming turn slides down from the top of the screen with a partial scrim, so that ongoing media content remains visible"]]