MotionLayout 예

Compose 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 애니메이션을 사용하는 방법을 알아봅니다.
Compose의 애니메이션 →

이 문서에는 MotionLayout을 사용하는 방법의 예가 포함되어 있습니다. 각 예에는 모션을 보여주는 동영상과 모션 장면 및 레이아웃의 코드가 포함되어 있습니다.

기본 모션

이 예에는 터치하고 드래그하여 가로로 이동할 수 있는 단일 뷰가 포함되어 있습니다.

그림 1. 뷰를 드래그합니다.

맞춤 속성 - backgroundColor

이 예는 기본 모션 예와 유사합니다. 기본 모션 외에도 뷰의 배경색이 뷰가 이동함에 따라 변경됩니다.

그림 2. 배경색이 변경되는 동안 뷰를 드래그합니다.

ImageFilterView - 이미지 전환

이 예에서는 ImageFilterView의 채도 값을 전환하는 방법을 보여줍니다.

그림 3. 채도가 변경되는 동안 이미지를 드래그합니다.

키프레임 위치

이 예에서는 <KeyFrameSet>를 사용하여 모션 중에 뷰의 Y 위치를 변경합니다.

그림 4. 뷰를 드래그하고 Y 위치를 변경합니다.

키프레임 보간

이 예에서는 키프레임 위치의 예를 기반으로 뷰 전환에 회전과 크기 조절을 추가합니다.

그림 5. 뷰를 드래그하고 Y 위치, 회전, 크기를 변경합니다.

키프레임 주기

이 예에서는 <KeyCycle> 요소를 추가하여 파도와 같은 모션을 뷰에 추가합니다.

그림 6. 색상을 변경하면서 물결 모양의 모션으로 뷰를 드래그합니다.

CoordinatorLayout(1/2)

이 예에서는 MotionLayout을 기존 AppBarLayout에 추가하여 앱 바에 모션을 추가합니다. 이 예는 MotionLayout 소개 (파트 III)에 자세히 설명되어 있습니다.

그림 7. 앱 바가 확장되는 동안 콘텐츠 스크롤

CoordinatorLayout(2/2)

이 예에서는 MotionLayout을 기존 AppBarLayout에 추가하여 앱 바에 모션을 추가합니다.

그림 8. 앱 바가 확장되고 텍스트가 앱 바 안팎으로 애니메이션 처리되는 동안 콘텐츠 스크롤

DrawerLayout(1/2)

이 예에서는 DrawerLayout에 모션을 추가하는 방법을 보여줍니다. 이 예는 MotionLayout 소개 (파트 III)에 자세히 설명되어 있습니다.

그림 9. `DrawerLayout`을 펼칩니다.

DrawerLayout(2/2)

이 예에서는 DrawerLayout에 모션을 추가하는 방법을 보여줍니다.

그림 10. 애니메이션이 적용된 메뉴 텍스트로 `DrawerLayout` 을 확장합니다.

측면 패널

이 예에서는 기본 콘텐츠 영역을 오른쪽으로 드래그할 때 측면 패널을 표시하는 방법을 보여줍니다.

그림 11. 기본 콘텐츠를 드래그하여 측면 패널을 표시합니다.

Parallax

이 예에서는 다양한 배경 레이어가 서로 다른 속도로 움직이는 시차 배경을 보여줍니다.

그림 12. 헤더 이미지의 시차 효과

ViewPager

이 예에서는 ViewPager 탭 사이를 스와이프할 때 모션을 추가하는 방법을 보여줍니다. 이 예는 MotionLayout 소개 (파트 III)에 자세히 설명되어 있습니다.

그림 13. `ViewPager`를 스와이프할 때 헤더 이미지의 시차 효과입니다.

ViewPager - Lottie

이 예에서는 ViewPager 탭 사이를 스와이프할 때 모션을 추가하는 방법을 보여줍니다.

그림 14. `ViewPager`를 스와이프하는 동안 헤더 이미지에 Lottie 효과를 보여주는 이미지입니다.

복합 모션(1/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

그림 15. 효과를 결합하여 복잡한 모션을 만듭니다.

복합 모션(2/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

그림 16. 효과를 결합하여 복잡한 모션을 만듭니다.

복합 모션(3/3)

이 예에서는 이전 예의 요소를 결합하여 복잡한 모션을 보여줍니다.

그림 17. 효과를 결합하여 복잡한 모션을 만듭니다.

프래그먼트 전환(1/2)

이 예에서는 MotionLayout을 사용하여 프래그먼트 간에 전환하는 방법을 보여줍니다.

그림 18. 프래그먼트 전환

프래그먼트 전환(2/2)

이 예에서는 MotionLayout을 사용하여 프래그먼트 간에 전환하는 방법을 보여줍니다.

그림 19. 프래그먼트 전환

YouTube와 같은 모션

이 예에서는 컴팩트 뷰와 추가 콘텐츠가 포함된 전체 화면 환경 간의 전환을 보여줍니다.

그림 20. YouTube와 유사한 프래그먼트 전환

KeyTrigger

이 예에서는 전환이 진행률 임계값을 넘을 때 플로팅 작업 버튼을 표시하거나 숨기는 방법을 보여줍니다.

그림 21. 플로팅 작업 버튼을 표시하거나 숨깁니다.

다중 상태

이 예에서는 상태를 사용하여 적용할 모션을 결정하는 방법을 보여줍니다.

그림 22. 상태에 따라 다른 모션