[Android] 트윈 애니메이션

트윈 애니메이션은 보여줄 대상(예를들면 View, Drawable 객체 등등)을 적절하게 연산한 후 그 결과를 연속적으로 디스플레이하는 방식을 제공한다.

보여줄 이미지를 일일이 지정하는 것이 아니고, 애니메이션을 보여줄 대상과 변환 방식만 지정하면 간편하게 애니메이션 효과를 보여주는 것이다.

애니메이션 대상만 지정하면 시스템이 내부적으로 적절하게 연산하는 과정을 거친다.

트윈 애니메이션

트윈 애니메이션의 대상과 애니메이션 효과는 다음과 같이 구분할 수 있다.

구분	이름	설명
대상	뷰	View 는 위젯, 레이아웃을 모두 포함
	그리드 객체	다양한 Drawable 에 애니메이션 적용 가능. ShapeDrawable 은 캔버스에 그릴 도형을 지정할 수 있고, BitmapDrawable 은 비트맵 이미지를 지정할 수 있다.
효과	위치 이동	Translate 로 정의되는 액션은 대상의 위치를 이동하기 위해 사용되는 효과이다.
	확대/축소	Scale 로 정의되는 액션은 대상의 크기를 크게 하거나 작게 하기위해 사용되는 효과이다.
	회전	Rotate 로 정의되는 액션은 대상을 회전하기 위해 사용되는 효과이다.
	투명도	Alpha 로 정의되는 액션은 대상의 투명도를 조절하는데 사용되는 효과이다.

(티스토리는 왜 양옆에 틀이 막고있는지 모르겠다. 아주 이상한것같다)

애니메이션 액션 정보

트윈 애니메이션을 위한 액션정보는 XML 리소스로 정의하거나 자바 코드에서 직접 객체로 만들 수 있다. 애니메이션을 위한 XML 파일은 /res/anim 폴더의 밑에 두어야 하며 확장자를 xml 로 해야한다. (꼭 anim 으로 디렉토리를 생성해야한다.)

이렇게 리소스로 포함된 애니메이션 액션 정의는 다른 리소스와 마찬가지로 빌드할 때 컴파일되어 설치 파일에 포함된다.

확대/축소를 위한 애니메이션 액션 정보는 <scale> 태그를 사용할 수 있으며 다음과 같이 정의할 수 있다.

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="3.0"
    android:toYScale="3.0"
    android:duration="1500"/>

set 태그안에는 여러개의 <scale> 태그를 정의할 수 있다.

startOffset : 애니메이션 시작 시간. 지정된 시간 후 액션이 수행된다.

duration : 애니메이션 지속 시간. 밀리초 단위(2500밀리초 -> 2.5초)

<scale> 태그는 대상을 확대하거나 축소할 때 사용되는데, 크기를 변경하기 위한 축의 정보는 X축과 Y축에 대하여 각각 pivotX 와 pivotY 로 지정된다.

fromXScale, fromYScale 은 시작할 때의 확대/축소 비율이며, toXScale 과 toYScale 은 끝날 때의 확대/축소 비율이다.

 확대 애니메이션이 보여진 후 크기가 다시 원래대로 돌아가는데, 그 이유는 커지는 이미지가 실체 뷰 객체가 아니고 단지 그래픽으로만 처리하여 보여주기 때문이다.

 확대 애니메이션이 적용된 상태에서 부드럽게 원상태로 돌리고 싶다면 첫번째 액션의 duration 만큼 원상태로 되돌아오는 액션의 startOffset 을 조정해주면 부드럽게 확대 - 축소 애니메이션을 구현할 수 있다. 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--1.5초 동안 애니메이션 보여줌-->
    <scale
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="3.0"
        android:toYScale="3.0"
        android:duration="1500"/>

    <!--1.5초 후에 원상태로 돌아오는 애니메이션-->
    <scale
        android:startOffset="1500"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.3"
        android:toYScale="0.3"
        android:duration="1500"/>
</set>

애니메이션 동작시키기

애니메이션 액션 정보는 어떤 뷰에든 적용할 수 있다. 뷰에는 startAnimation 메서드가 가 있어 이 메서드를 호출하기만 하면 지정된 액션의 애니메이션이 동작한다.

이 메서드의 파라미터로는 Animation 객체가 전달되는데, Animation 객체는 XML 로 정의했던 애니메이션 액션 정보가 메모리에 만들어진 것이다.

애니메이션 액션 정보는 AnimationUtils 클래스의 loadAnimation 메서드를 이용해 로딩할 수 있다.

Animation scale = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
view.startAnimation(scale);

애니메이션을 위한 태그의 종류

애니메이션 액션 정보를 XML 에 정의할 때 <scale> 외에 이동, 투명도 등을 설정할 수 있는 다른 태그들도 있다.

• 위치 이동<translate>→ TranslateAnimation
• 회전<rotate> → RotateAnimation
• 확대/축소<scale> → ScaleAnimation
• 투명도<alpha> → AlphaAnimation
• 애니메이션 집합<set> → AnimationSet

+ 추가로 강의 영상 내용 정리

# 트윈 애니메이션

 - 뷰 애니메이션이라고도 하며, 보여줄 대상을 적절하게 연산한 후 그 결과를 연속적으로 디스플레이 하는 방식임

 - 애니메이션 대상과 변환 방식을 지정하면 애니메이션 효과를 낼 수 있도록 만들어줌

 - 따라서 프레임 애니메이션처럼 변경하면서 보여줄 각각의 이미지를 추가할 필요 없이 대상만 지정하면 시스템이 내부적으로 적절하게 연산하는 과정을 거치게 됨

# 트윈 애니메이션을 위한 액션 정보

 - XML 리소스로 정의하거나 자바 코드에서 직접 객체로 만듦

 - 애니메이션을 위한 XML 파일은 /res/anim 폴더 밑에 두어야 하며 확장자를 xml 로 함.

 - 리소스로 포함된 애니메이션 액션 정의는 다른 리소스와 마찬가지로 빌드할 때 컴파일 되어 설치파일에 포함됨.

# 트윈 애니메이션 - 인터폴레이터

 - accelerate_interpolator : 애니메이션 효과를 점점 빠르게 나타나도록 만듦

 - decelerate_interpolator : 애니메이션 효과를 점점 늘게 나타나도록 만듦

 - accelerate_decelerate_interpolator : 애니메이션 효과를 점점 빠르다가 느리게 나타나도록 만듦

 - anticipate_interpolator : 애니메이션 효과를 시작 위치에서 조금 뒤로 당겼다가 시작하도록 만듦

 - overshoot_interpolator : 애니메이션 효과를 종료 위치에서 조금 지나쳤다가 종료되도록 만듦

- 출처 : 부스트코스 강의