피드로 돌아가기
강남언니 공식 블로그Mobile
원문 읽기
안드로이드 MotionLayout
Google이 MotionLayout을 통해 XML 선언만으로 사용자 터치에 실시간 반응하는 복합 애니메이션 구현
AI 요약
Context
Android에서 애니메이션 처리는 Animated Vector Drawable, Property Animation Framework, LayoutTransition, TransitionManager, CoordinatorLayout 등 여러 도구로 분산되어 있었다. 이들 도구는 각각 특정 애니메이션 요구사항에만 최적화되어 있었으며, 사용자 터치에 실시간으로 반응하는 인터랙티브 애니메이션을 구현하기 어려웠다.
Technical Solution
- MotionLayout을 ConstraintLayout의 상속 ViewGroup으로 설계하여 기존 레이아웃 체계와 통합: ConstraintLayout 2.0에 포함되며 API 14 이상에서 호환
- MotionScene XML 파일로 모든 애니메이션 정의를 선언적으로 관리: MotionLayout이 layoutDescription 속성으로 MotionScene 참조
- ConstraintSet을 통해 별도 레이아웃 파일 없이 View의 위치·크기·커스텀 속성을 직접 정의: start 상태와 end 상태를 XML에 선언
- Transition 요소 내 OnSwipe와 OnClick 핸들러로 사용자 입력에 대한 실시간 반응 구현: dragDirection, touchAnchorId, touchAnchorSide 속성으로 제어
- KeyFrameSet을 활용한 중간 프레임 정의로 직선 움직임을 곡선 경로로 변환: framePosition, keyPositionType(deltaRelative), percentX/percentY, sizePercent, KeyAttribute로 알파값 애니메이션 적용
Key Takeaway
MotionLayout은 Property Animation Framework(속성 애니메이션), TransitionManager(레이아웃 변화), CoordinatorLayout(터치 반응)의 기능을 단일 XML 기반 선언형 인터페이스로 통합함으로써, 코드 작성 없이 복잡한 인터랙티브 애니메이션을 구현할 수 있게 한다.
실천 포인트
Android 모바일 애플리케이션에서 퀵메뉴, 드로어, 탭 전환 등 사용자 제스처에 따라 실시간으로 반응해야 하는 UI 애니메이션을 구현할 때, MotionLayout의 ConstraintSet과 KeyFrameSet을 조합하여 XML만으로 Material 디자인 수준의 부드러운 곡선 경로 애니메이션을 만들 수 있다.