Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

애니메이션 개요

애니메이션은 사용자에게 앱에 일어나고 있는 일에 대한 시각적 단서를 추가로 줄 수 있습니다. 애니메이션은 새 콘텐츠가 로드되거나 새 활동이 제공될 때와 같이 UI 상태가 변경될 때 특히 유용합니다. 또한 앱에 세련된 느낌을 더하기 때문에 앱이 더욱 매력적으로 보이는 효과가 있습니다.

Android에는 원하는 애니메이션 유형에 따라 다양한 애니메이션 API가 있습니다. 이 페이지에서는 UI에 모션을 추가할 수 있는 다양한 방법을 개략적으로 살펴보겠습니다.

애니메이션을 언제 사용해야 하는지 더 잘 이해하려면 모션에 대한 머티리얼 디자인 가이드도 참조하세요.

비트맵 애니메이션

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

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

예를 들어 재생 버튼이 탭하면 일시중지 버튼으로 변환되도록 애니메이션을 만들면 두 작업이 연결되어 있으며 하나를 누르면 다른 것이 표시된다는 사실을 사용자에게 효과적으로 전달할 수 있습니다.

자세한 내용은 드로어블 그래픽에 애니메이션 사용을 참조하세요.

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

그림 2. 대화상자가 나타났다가 사라질 때 자연스러운 UI 변경을 보여주는 섬세한 애니메이션

레이아웃에서 뷰의 가시성 또는 위치를 변경해야 하는 경우 섬세한 애니메이션을 포함해야 합니다. 그래야 사용자가 UI가 어떻게 변경되는지 쉽게 이해할 수 있습니다.

현재 레이아웃 내에서 뷰를 옮기거나 표시하거나 숨기려면 Android 3.0(API 레벨 11) 이상에서 사용할 수 있는 android.animation 패키지의 속성 애니메이션 시스템을 사용하면 됩니다. 이러한 API는 일정 기간 동안 View 개체의 속성을 업데이트하고 속성이 변경되면 지속적으로 뷰를 다시 그립니다. 예를 들어 위치 속성을 변경하면 뷰가 화면을 가로질러 이동하거나 알파 속성을 변경하면 뷰가 페이드인 또는 페이드아웃됩니다.

최소한의 노력으로 이러한 애니메이션을 만들려면 레이아웃에서 애니메이션을 사용 설정하면 됩니다. 그러면 뷰의 가시성을 변경하는 것만으로도 애니메이션이 자동으로 적용됩니다. 자세한 내용은 레이아웃 업데이트에 자동 애니메이션 처리를 참조하세요.

속성 애니메이션 시스템으로 애니메이션을 작성하는 방법에 관해 자세히 알아보려면 속성 애니메이션 개요를 참조하세요. 또는 일반적인 애니메이션을 만들려면 다음 페이지를 참조하십시오.

물리학 기반 모션

그림 3. ObjectAnimator로 제작된 애니메이션

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

가능하면, 자연스러움을 위해 애니메이션에 실제 물리학을 적용해야 합니다. 예를 들어, 타겟이 변경될 때 애니메이션에서 운동량을 유지하고 변경 중에 전환이 매끄럽게 이루어지도록 만들어야 합니다.

이러한 동작을 제공하기 위해 Android 지원 라이브러리에는 물리학 법칙에 따라 애니메이션의 동작을 제어하는, 물리학 기반 애니메이션 API가 있습니다.

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

물리학을 기반으로 하지 않는 애니메이션(ObjectAnimator API로 제작된 애니메이션)은 상당히 정적이고 재생 시간이 고정되어 있습니다. 타겟 값이 변경되면 타겟 값 변경 시 애니메이션을 취소하고 새 값을 새 시작 값으로 설정하여 애니메이션을 재구성한 다음 새 타겟 값을 추가해야 합니다. 시각적으로 이 같은 프로세스에서는 그림 3에 나타난 것처럼, 애니메이션에 갑작스러운 정지 동작이 발생하고 이후 움직임이 자연스럽게 연결되지 않습니다.

반면, DynamicAnimation 같은 물리학 기반 애니메이션 API로 제작된 애니메이션은 물리력으로 구동됩니다. 타겟 값이 바뀌면 물리력이 바뀝니다. 새 물리력이 기존 속도에 적용되어 새 타겟으로 중단 없이 전환됩니다. 이 프로세스는 그림 4에 나타난 것처럼, 애니메이션을 더 자연스럽게 만들어줍니다.

레이아웃 변경 애니메이션

그림 5. 레이아웃을 변경하거나 새 활동을 시작하여 세부정보를 보여주는 애니메이션

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

예를 들어 사용자가 세부정보를 보기 위해 항목을 누르면, 레이아웃을 항목 세부정보로 바꾸고 그림 5와 같은 전환을 적용할 수 있습니다.

시작 장면은 대개 현재 레이아웃에서 자동으로 결정되지만, 시작 및 종료 레이아웃은 Scene에 각각 저장됩니다. 원하는 애니메이션 유형을 시스템에 알리는 Transition을 만든 다음 TransitionManager.go()를 호출할 수 있습니다. 그러면 시스템이 애니메이션을 실행하여 레이아웃을 전환합니다.

자세한 내용은 전환을 사용하여 레이아웃 간 애니메이션을 참조하세요. 샘플 코드는 BasicTransition을 확인하세요.

활동 간 애니메이션

Android 5.0(API 레벨 21) 이상에서는 활동 간에 전환되는 애니메이션을 만들 수도 있습니다. 이는 레이아웃 변경 애니메이션 을 위해 위에서 설명한 동일한 전환 프레임워크를 기반으로 하지만, 이를 활용해 별도의 활동에 해당하는 레이아웃 간의 애니메이션을 만들 수도 있습니다.

측면에서 새 활동을 슬라이드 인하거나 페이드인하는 등의 간단한 애니메이션을 적용할 수 있지만, 각 활동에 공유되는 뷰 간에 전환되는 애니메이션을 만들 수도 있습니다. 예를 들어 사용자가 세부정보를 보기 위해 항목을 탭하는 경우, 그림 5에 표시된 애니메이션처럼 해당 항목이 매끄럽게 확장되면서 화면을 채우는 애니메이션을 사용하여 새 활동으로 전환할 수 있습니다.

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

전체 세부정보는 애니메이션으로 활동 시작을 참조하세요. 샘플 코드는 ActivitySceneTransitionBasic을 확인하세요.