모션 편집기로 애니메이션 빌드

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Android 스튜디오에 MotionLayout 레이아웃 유형에 사용할 수 있는 시각적 디자인 편집기가 포함되어 애니메이션을 더 쉽게 만들고 미리 볼 수 있습니다.

모션 편집기에서는 Android 앱에서 애니메이션의 기초가 되는 MotionLayout 라이브러리의 요소를 조작할 수 있는 간단한 인터페이스가 제공됩니다. Android 스튜디오가 없는 경우 이러한 요소를 만들고 변경하려면 XML 리소스 파일에서 제약 조건을 수동으로 수정해야 합니다. 이제 모션 편집기에서 이 XML을 생성할 수 있으며 시작 및 종료 상태, 키프레임, 전환, 타임라인도 지원됩니다.

모션 편집기를 시작하려면 다음 단계를 따르세요.

  1. ConstraintLayout을 생성합니다.
  2. Layout Editor의 미리보기를 마우스 오른쪽 버튼으로 클릭합니다.
  3. 다음과 같이 Convert to MotionLayout을 클릭합니다.

Android 스튜디오에서 ConstraintLayout을 MotionLayout으로 변환하면 Motion Scene 파일(레이아웃 파일 이름에 _scene이 추가된 .xml 파일)도 XML이 포함된 디렉터리에 추가됩니다.

그 후 MotionLayout가 루트 레이아웃이 되고 모션 편집기 UI에 표시됩니다. 레이아웃에 이미 시작 ConstraintSet, 끝 ConstraintSet이 포함되어 있으며 시작부터 끝까지 전환이 이루어집니다.

개요 그래픽을 사용하여 ConstraintSet 또는 Transition을 선택하고 선택 패널에서 구성 요소를 선택할 수 있습니다.

그 후 시작 또는 끝의 제약 조건 및 속성 ConstraintSetConstraintLayout 편집과 같은 방식으로 수정할 수 있습니다.

그래프에 더 많은 요소를 빌드하려면 만들기 아이콘을 사용하여 ConstraintSet, Transition, OnClick/OnSwipe 제스처를 빠르게 추가하면 됩니다.

키프레임을 추가하려면 먼저 Transition 화살표를 클릭합니다.

그 후 Transition 타임라인 창에서 오른쪽 상단을 클릭하고 KeyPosition을 선택합니다.

그러면 키프레임의 속성을 설정할 수 있는 대화상자가 열립니다.

속성 패널의 Transition에 OnClickOnSwipe 핸들러도 추가할 수 있습니다.

그러면 타겟 구성요소, 드래그 방향 등 클릭 속성을 설정할 수 있는 대화상자가 열립니다.

모션 편집기는 디자인 화면에서 애니메이션 미리보기를 지원합니다. 애니메이션을 선택할 때 타임라인 상단의 Play를 클릭하면 애니메이션을 미리 볼 수 있습니다.