애니메이션 소개

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

애니메이션을 사용하면 앱에 일어나고 있는 일을 사용자에게 알려주는 시각적 단서를 추가할 수 있습니다. 새 콘텐츠가 로드되거나 새 작업이 제공되는 경우와 같이 UI에서 상태가 변경되는 경우 특히 유용합니다. 또한 애니메이션은 앱에 세련된 느낌을 더해주어 더 높은 품질의 디자인과 분위기를 자아냅니다.

Android에는 원하는 애니메이션 유형에 따라 다양한 Animation API가 포함되어 있습니다. 이 문서에서는 UI에 모션을 추가하는 다양한 방법을 간략하게 설명합니다.

애니메이션을 사용해야 하는 경우를 더 잘 이해하려면 모션에 관한 Material Design 가이드도 참고하세요.

비트맵 애니메이션

그림 1. 애니메이션된 드로어블

아이콘이나 그림과 같은 비트맵 그래픽에 애니메이션을 적용하려면 드로어블 애니메이션 API를 사용합니다. 일반적으로 이러한 애니메이션은 드로어블 리소스를 사용하여 정적으로 정의되지만 런타임에 애니메이션 동작을 정의할 수도 있습니다.

예를 들어 두 작업이 관련되어 있음을 사용자에게 전달하는 좋은 방법은 재생 버튼을 탭하면 일시중지 버튼으로 변환되는 애니메이션을 적용하는 것입니다.

자세한 내용은 드로어블 그래픽 애니메이션화를 참고하세요.

UI 가시성 및 모션 애니메이션

그림 2. 대화상자가 표시되고 사라질 때 미묘한 애니메이션을 사용하면 UI 변경이 덜 거슬립니다.

레이아웃에서 뷰의 공개 상태나 위치를 변경해야 하는 경우 사용자가 UI가 어떻게 변경되는지 이해할 수 있도록 미묘한 애니메이션을 포함하는 것이 가장 좋습니다.

현재 레이아웃 내에서 뷰를 이동, 표시 또는 숨기려면 Android 3.0(API 수준 11) 이상에서 사용할 수 있는 android.animation 패키지에서 제공하는 속성 애니메이션 시스템을 사용하면 됩니다. 이러한 API는 일정 기간 동안 View 객체의 속성을 업데이트하여 속성이 변경될 때 뷰를 지속적으로 다시 그립니다. 예를 들어 위치 속성을 변경하면 뷰가 화면에서 이동합니다. alpha 속성을 변경하면 뷰가 페이드 인 또는 페이드 아웃됩니다.

이러한 애니메이션을 만드는 가장 간단한 방법은 레이아웃에서 애니메이션을 사용 설정하여 뷰의 가시성을 변경할 때 애니메이션이 자동으로 적용되도록 하는 것입니다. 자세한 내용은 레이아웃 업데이트 자동 애니메이션을 참고하세요.

속성 애니메이션 시스템을 사용하여 애니메이션을 빌드하는 방법을 알아보려면 속성 애니메이션 개요를 참고하세요. 다음 페이지를 참고하여 일반적인 애니메이션을 만들 수도 있습니다.

물리학 기반 모션

그림 3. ObjectAnimator로 빌드된 애니메이션

그림 4. 물리학 기반 API로 빌드된 애니메이션

가능한 경우 언제든지 애니메이션에 실제 물리학을 적용하여 자연스럽게 보이도록 합니다. 예를 들어 목표가 변경될 때 추진력을 유지하고 변경 중에 원활하게 전환해야 합니다.

이러한 동작을 제공하기 위해 Android 지원 라이브러리에는 물리학 법칙을 사용하여 애니메이션 발생 방식을 제어하는 물리학 기반 Animation API가 포함되어 있습니다.

다음은 두 가지의 일반적인 물리학 기반 애니메이션입니다.

ObjectAnimator API로 빌드된 애니메이션과 같이 물리학을 기반으로 하지 않는 애니메이션은 상당히 정적이며 지속 시간이 고정되어 있습니다. 목표 값이 변경되면 목표 값이 변경되는 시점에 애니메이션을 취소하고 새 값을 새 시작 값으로 사용하여 애니메이션을 다시 구성하고 새 목표 값을 추가해야 합니다. 시각적으로 이 프로세스는 그림 3과 같이 애니메이션을 갑자기 중지하고 이후에 분리된 움직임을 만듭니다.

DynamicAnimation와 같은 물리학 기반 Animation API로 빌드된 애니메이션은 힘에 의해 구동됩니다. 목표 값이 변경되면 힘이 변경됩니다. 새 힘이 기존 속도에 적용되어 새 타겟으로 지속적으로 전환됩니다. 이 프로세스를 사용하면 그림 4와 같이 더 자연스러운 애니메이션이 생성됩니다.

레이아웃 변경 애니메이션

그림 5. 레이아웃을 변경하거나 새 활동을 시작하여 세부정보를 더 표시하는 애니메이션을 구현할 수 있습니다.

Android 4.4 (API 수준 19) 이상에서는 전환 프레임워크를 사용하여 현재 활동 또는 프래그먼트 내에서 레이아웃을 교체할 때 애니메이션을 만들 수 있습니다. 시작 및 종료 레이아웃과 사용할 애니메이션 유형을 지정하기만 하면 됩니다. 그러면 시스템이 두 레이아웃 간의 애니메이션을 파악하고 실행합니다. 이를 사용하여 전체 UI를 교체하거나 일부 뷰만 이동하거나 교체할 수 있습니다.

예를 들어 사용자가 항목을 탭하여 자세한 정보를 볼 때 그림 5와 같은 전환을 적용하여 레이아웃을 항목 세부정보로 대체할 수 있습니다.

시작 및 종료 레이아웃은 각각 Scene에 저장되지만 시작 장면은 일반적으로 현재 레이아웃에서 자동으로 결정됩니다. Transition를 만들어 원하는 애니메이션 유형을 시스템에 알린 다음 TransitionManager.go()를 호출하면 시스템에서 애니메이션을 실행하여 레이아웃을 교체합니다.

자세한 내용은 전환을 사용하여 레이아웃 변경 애니메이션 처리를 참고하세요. 샘플 코드는 BasicTransition을 참고하세요.

활동 간 애니메이션

Android 5.0 (API 수준 21) 이상에서는 활동 간에 전환하는 애니메이션을 만들 수도 있습니다. 이는 이전 섹션에서 설명한 것과 동일한 전환 프레임워크를 기반으로 하지만 별도의 활동에서 레이아웃 간에 애니메이션을 만들 수 있습니다.

새 활동을 측면에서 슬라이드하거나 페이드 인하는 것과 같은 간단한 애니메이션을 적용할 수 있지만 각 활동의 공유 뷰 간에 전환되는 애니메이션을 만들 수도 있습니다. 예를 들어 사용자가 항목을 탭하여 자세한 정보를 볼 때 그림 5에 표시된 애니메이션과 같이 항목을 원활하게 확장하여 화면을 채우는 애니메이션을 사용하여 새 활동으로 전환할 수 있습니다.

평소와 같이 startActivity()를 호출하지만 ActivityOptions.makeSceneTransitionAnimation()에서 제공하는 옵션 번들을 전달합니다. 이 옵션 번들에는 전환 프레임워크가 애니메이션 중에 연결할 수 있도록 활동 간에 공유되는 뷰가 포함될 수 있습니다.

추가 리소스는 다음을 참고하세요.