트윈 애니메이션

스레드 애니메이션이 만화 같은 효과를 만들어내는 가장 기본적인 방법이긴 하지만 각각의 프레임을 모두 이미지로 그려야 한다는 번거로움이 있습니다.

장편 만화영화의 경우 엄청난 양의 이미지 작업을 해야 한다는 점을 생각하면 충분히 이해가 될 겁니다.

이 때문에 동일한 이미지가 움직이도록 만드는 경우 직접 이미지를 그리지 않고 프로그램이 이미지의 위치를 약간 바꾸고 화면에 뿌려주도록 하는 방법을 사용하는 것이 훨씬 간단하다고 할 수 있습니다.

이런 방식으로 애니메이션을 동작시키는 것이 트윈 애니메이션입니다.

트윈 애니메이션을 만드는 방법에 대해 알아봅시다.

트윈 애니메이션

트윈 애니메이션(Tweened Animation)은 보여줄 대상을 적절하게 연산한 후 그 결과를 연속적으로 디스플레이하는 방식을 제공합니다.

애니메이션 대상과 변환 방식을 지정하면 애니메이션 효과가 생기는 거죠.

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

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

애니메이션 액션 정보

트윈 애니메이션을 위한 액션(Action) 정보는 XML 리소스로 정의하거나 자바 코드에서 직접 객체로 만들 수 있습니다.

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

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

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

<?xml version="1.0"encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2500"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="2.0"
    android:toYScale="2.0"
/>

시작 시간과 지속 시간은 각각 startOffset과 duration으로 정의됩니다.

startOffset은 시작할 시간을 지정하는 것으로 애니메이션이 시작한 지 얼마 후에 이 액션이 수행될 것인지를 알 수 있도록 합니다.

duration은 애니메이션이 지속하는 시간으로 여기에서는 2.5초 동안 지속하도록 되어 있습니다. (시간 단위가 밀리초이므로 2500 밀리초는 2.5초가 됩니다.)

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

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

여기에서는 1.0으로 시작하여 2.0으로 끝나므로 원래의 크기에서 시작해서 두 배의 크기로 확대되는 애니메이션이 수행되게 됩니다.

 

애니메이션 동작시키기

애니메이션 액션 정보는 어떤 뷰에든 적용할 수 있습니다.

뷰에는 startAnimation 메소드가 있어서 이 메소드를 호출하면 애니메이션이 동작합니다.

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

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

애니메이션 액션 정보는 AnimationUtils 클래스의 loadAnimation 메소드를 이용해 로딩됩니다.

 

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

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

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

여러 애니메이션 동작을 하나의 파일에 정의할 때 <set> 태그가 사용됩니다.

<set> 태그 안에는 여러 개의 태그가 들어갈 수 있습니다.