앱 간에 전환할 때 크로스페이드 전환을 사용합니다. 크로스페이드 전환은 한 요소를 뷰로 페이드아웃하고 다른 요소는 페이드아웃합니다. 이 전환은 현재 앱에서 나가면서 다른 앱으로 빠르게 이동하는 것을 나타냅니다.
크로스페이드 모션으로 사용자가 앱 간에 빠르게 전환
예
빠른 크로스페이드는 사용자를 내비게이션 앱에서 미디어 앱으로 이동했다가 다시 돌아오게 함
동종 앱 뷰 간 전환
앱 바의 탭이나 재생목록의 노래와 같이 앱에서 동일한 계층 구조의 뷰 (동종 앱 보기라고도 함) 간에 전환할 때 공유 축 전환을 사용합니다. 이 전환의 가로, 좌우 이동은 앱 내에서 동일한 수준으로 유지되는 상태를 반영합니다.
빠른 크로스페이드로 사용자를 내비게이션 앱에서 미디어 앱으로 이동했다가 다시 돌아오는 동작
예
미디어 앱에서 노래 간에 전환할 때 공유 축 모션 패턴은 두 노래가 동일한 재생목록에 있음을 강화합니다.
기존 작업 확장
사용자가 작업을 보거나 수행하는 중에 보조적인 관련 작업을 하는 경우 해당 보조 작업은 수직 (위 또는 아래) 모션으로 도입되어야 합니다. 이 보조 작업은 기본 작업 앞에 스크림 배경과 함께 전체 화면 오버레이에 표시됩니다. 스크림을 통해 기본 작업이 나타난다는 사실은 사용자가 그 작업을 아직 진행 중이라는 것을 강조해 줍니다.
그러면 보조 작업이 여는 동작의 반대 방향으로 닫힙니다. 작업이 완료되었으므로 이 역방향 모션은 원래 모션보다 시간이 덜 걸립니다.
짧고 선택사항인 작업이 진행 중인 작업 앞에 갑자기 나타나야 하는 경우 화면 가장자리에서 위 또는 아래로 슬라이드되고 부분적인 스크림이 표시되어야 합니다. 또는 전체 스크림과 함께 화면 중앙으로 페이드 아웃됩니다. 새 작업을 표시하려는 위치와 가장 가까운 위치에서 모션을 시작하세요.
방해가 되는 작업이 화면 상단에 표시되어야 하는 경우 부분적으로 스크림을 사용하여 상단에서 슬라이드 안으로 슬라이드합니다.
예
이 Android Auto 예에서 예정된 회전에 관한 알림은 진행 중인 미디어 콘텐츠가 계속 표시되도록 부분 스크림과 함께 화면 상단에서 아래로 슬라이드됩니다.
[null,null,["최종 업데이트: 2025-07-25(UTC)"],[[["\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"]]
