MotionLayout 예

이 문서에는 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'를 스와이프하는 동안 헤더 이미지에 로티 효과를 보여주는 이미지

복합 모션(1/3)

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

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

복합 모션(2/3)

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

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

복합 모션(3/3)

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

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

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

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

그림 18. 프래그먼트 전환

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

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

그림 19. 프래그먼트 전환

YouTube와 같은 모션

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

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

KeyTrigger

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

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

다중 상태

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

그림 22. 상태에 따라 움직임이 다릅니다.