애니메이션 리소스

안드로이드 프로젝트 리소스 디렉터리(res/)에 제공할 수 있는 애니메이션 리소스에 대해서 알아보자.

애니메이션 리소스는 속성 애니메이션과 뷰 애니메이션 두 가지 유형 중 하나를 정의할 수 있다.

• 속성 애니메이션
  : 설정된 시간 경과에 따른 객체의 속성 값을 Animator로 수정하여 애니메이션을 만듭니다.
• 뷰 애니메이션
  - 트윈 애니메이션
  : Animation을 사용하여 단일 이미지에 일련의 변환을 진행하여 애니메이션을 만듭니다.
  - 프레임 애니메이션
  : AnimationDrawable을 사용하여 연속된 이미지를 순서대로 표시하여 애니메이션을 만듭니다.

이 중에서 트윈 애니메이션의 사용법을 알아볼 것이다.

트윈 애니메이션

트윈 애니메이션은 res/anim/에 저장되고 R.anim 클래스에서 액세스되는 XML로 정의되는 애니메이션으로, 그래픽에서 회전, 페이딩, 이동, 확장과 같은 변환을 진행합니다.

요소

set

다른 애니메이션 요소(alpha, scale, translate, rotate) 또는 기타 set 요소를 갖고 있는 컨테이너. AnimationSet를 나타냅니다.

속성

android:interpolator
: 보간기 리소스. 애니메이션에서 적용할 Interpolator입니다. 값은 보간기 클래스 이름이 아닌 보간기를 지정하는 리소스 참조여야 합니다. 플랫폼에서 제공되는 기본 보간기 리소스를 사용하거나 고유한 자체 보간기 리소스를 만들 수 있습니다.

android:shareInterpolator
: 모든 하위 요소 간에 동일한 보간기를 공유하려면 'true'를 설정합니다.

alpha

페이드 인 또는 페이드 아웃 애니메이션. AlphaAnimation을 나타냅니다.

속성

android:fromAlpha
: 부동소수점. 시작 불투명도 오프셋으로, 여기서 0.0은 투명이고 1.0은 불투명입니다.

android:toAlpha
: 부동소수점. 끝 불투명도 오프셋으로, 여기서 0.0은 투명이고 1.0은 불투명입니다.

scale

크기 조절 애니메이션. pivotX 및 pivotY를 지정하여 이미지가 바깥쪽(또는 안쪽)으로 커지기 시작하는 이미지의 중심점을 지정할 수 있습니다. 예를 들어 값이 0, 0(왼쪽 상단)이면 일제히 오른쪽 아래로 커집니다. ScaleAnimation을 나타냅니다.

속성

android:fromXScale
: 부동소수점. 시작 X 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.

android:toXScale
: 부동소수점. 끝 X 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.

android:fromYScale
: 부동소수점. 시작 Y 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.

android:toYScale
: 부동소수점. 끝 Y 크기 오프셋으로, 여기서 1.0은 변경이 없다는 뜻입니다.

android:pivotX
: 부동소수점. 객체가 확장될 때 고정된 상태로 유지되는 X 좌표입니다.

android:pivotY
: 부동소수점. 객체의 크기가 확장될 때 고정된 상태로 유지되는 Y 좌표입니다.

translate

수직 및/또는 수평 모션. 세 가지 형식의 속성을 지원합니다. '%'로 끝나는 -100~100의 값(자신을 기준으로 한 백분율을 나타냄)과 '%p'로 끝나는 -100~100의 값(상위 요소를 기준으로 한 백분율), 접미사 없는 부동소수점 값(절댓값을 나타냄)을 각각 지원합니다. TranslateAnimation을 나타냅니다.

속성

android:fromXDelta
: 부동소수점 또는 백분율. 시작 X 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 너비를 기준으로 한 백분율(예: "5%") 또는 상위 요소 너비를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

android:toXDelta
: 부동소수점 또는 백분율. 끝 X 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 너비를 기준으로 한 백분율(예: "5%") 또는 상위 요소 너비를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

android:fromYDelta
: 부동소수점 또는 백분율. 시작 Y 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 높이를 기준으로 한 백분율(예: "5%") 또는 상위 요소 높이를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

android:toYDelta
: 부동소수점 또는 백분율. 끝 Y 오프셋입니다. 법선 위치를 기준으로 한 픽셀(예: "5")로 표현되거나 요소 높이를 기준으로 한 백분율(예: "5%") 또는 상위 요소 높이를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

rotate

회전 애니메이션. RotateAnimation을 나타냅니다.

속성

android:fromDegrees
: 부동소수점. 시작 각도 위치(단위: 도)입니다.

android:toDegrees
: 부동소수점. 끝 각도 위치(단위: 도)입니다.

android:pivotX
: 부동소수점 또는 백분율. 회전 중심의 X 좌표입니다. 객체의 왼쪽 가장자리를 기준으로 한 픽셀(예: "5")로 표현되거나 객체의 왼쪽 가장자리를 기준으로 한 백분율(예: "5%") 또는 상위 컨테이너의 왼쪽 가장자리를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

android:pivotY
: 부동소수점 또는 백분율. 회전 중심의 Y 좌표입니다. 객체의 상단 가장자리를 기준으로 한 픽셀(예: "5")로 표현되거나 객체의 상단 가장자리를 기준으로 한 백분율(예: "5%") 또는 상위 컨테이너의 상단 가장자리를 기준으로 한 백분율(예: "5%p")로 표현됩니다.

화면 전환 애니메이션

화면 전환 애니메이션을 구현하기 위해서는 트윈 애니메이션의 translate를 사용할 것이다.

4가지 애니메이션 리소스 파일을 생성한다.

slide_enter_from_left
왼쪽에서 들어오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

slide_enter_from_right
오른쪽에서 들어오는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

slide_exit_to_left
왼쪽으로 나가는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="-100%"
        android:toYDelta="0%" />
</set>

slide_exit_to_right
오른쪽으로 나가는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%" />
</set>

위 4가지 애니메이션 리소스를 통해서 액티비티와 프래그먼트에서 화면 전환 시 애니메이션을 적용해보자.

액티비티

overridePendingTransition() 메서드를 이용한다.
파라미터 두 가지가 필요하고, 첫 애니메이션은 다음 화면이 들어오는 애니메이션을, 두 번째 애니메이션은 현재 화면이 나가는 애니메이션을 등록하면 된다.

다음은 왼쪽으로 슬라이드 되면서 새 화면이 등장하는 애니메이션 효과를 준다.

startActivity(intent)
overridePendingTransition(R.anim.slide_enter_from_right, R.anim.slide_exit_to_left)

프래그먼트

프래그먼트 매니저 트랜잭션 내에서 setCustomAnimations() 메서드를 사용한다.
setCustomAnimations(enter: , exit: )
setCustomAnimations(enter: , exit: , popEnter: , popExit)

두 가지 중 하나를 선택해서 애니메이션을 등록해주면 된다.

왼쪽으로 슬라이드 되면서 새 화면이 등장하는 애니메이션 효과

parentFragmentManager.beginTransaction()
	.setCustomAnimations(R.anim.slide_enter_from_right, R.anim.slide_exit_to_left, R.anim.slide_enter_from_left,R.anim.slide_exit_to_right)
    .add(R.id.frame_layout_main, MemoListFragment())
    .addToBackStack(null)
    .commit()

(캡쳐)

오른쪽으로 슬라이드 되면서 현재 화면이 pop되는 듯한 애니메이션 효과

parentFragmentManager.beginTransaction()
	.setCustomAnimations(R.anim.slide_enter_from_left, R.anim.slide_exit_to_right)
    .remove(this)
    .commit()

(캡쳐)