Android 애니메이션#2 - Tweened Animation

Tweened Animation이란?

연산을 통해서 Animation 효과를 만드는 방법을 말합니다.
쉽게 풀어서 얘기하면 view의 위치를 이동, 회전, 확대/축소, 투명도 조절을 할 수 있습니다.

 을 적용할 수 있는 대상은 View나 layout이며, 보통 xml로 동작을 지정하고, AnimationUitls.loadAnimation()을 이용하여, view에 적용합니다.

확대/축소 - scale

확대 축소를 하는 action은 scale을 이용합니다. 
먼저 res/anim 폴더를 만들고 scale 조정을 위한 xml을 만듭니다.

<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"
    />

확대 후에 축소를 하고 싶다면 xml을 set으로 묶어서 진행 하면 됩니다.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:duration="2500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="2.0"
        android:toYScale="2.0"
        android:pivotX="50%"
        android:pivotY="50%"
        />
    <scale
        android:startOffset="2500"
        android:duration="2500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.5"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

startOffset은 시작하는 시간을 설정하므로 두번째 scale은 첫번째 scale일 끝난 뒤 시작됩니다.
또한 간단하게 처음 scale 속성에 repoeatMode="reverse"를 지정하면 두번째 scale 없이도 반대방향 효과를 보이게 됩니다. (이때 repeatCount는 1 이상이거나 무한반복이어야 합니다.)

이동 - translate

위치이동은 view나 layout을 한곳에서 다른곳으로 부드럽게 이동시킵니다

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        android:duration="5000"
        android:repeatCount="1"
        android:fillAfter="true"
        />
</set>

회전 - ratate

대상을 한점 기준으로 회전시킵니다.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="3000"
         />
</set>

기준값은 왼쪽상단 끝이기 때문에 필요한 경우  pivot으로 중심점을 지정합니다. 

투명도 - alpha

뷰의 투명도를 결정하며 0.0~1.0 사이의 값을 같습니다. (0 = 완전투명, 1 = 완전 불투명)

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="10000"
        />
</set>

Animation 효과 -Interpolator

Animation 구동시 좀더 실감나는 효과를 주기 위해서 Interpolator를 사용할 수 있습니다.

AnimationListener

animation의 시작, 종료, 반복시 listener를 등록하여 해당 시점을 알수 있습니다.

사용예시

public class MainActivity extends AppCompatActivity {
    Animation mAnim1;
    Animation mAnim2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mAnim1 = AnimationUtils.loadAnimation(getApplicationContext(), 
                                                     R.anim.rotation);
        mAnim1.setInterpolator(getApplicationContext(), 
                                        android.R.anim.accelerate_interpolator);
//        mAnim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
//        mAnim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
//        mAnim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale2);

        // 버튼 클릭시 animation 시작
        Button button = (Button) findViewById(R.id.button1);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(mAnim1);
            }
        });

        mAnim2 = AnimationUtils.loadAnimation(getApplicationContext(), 
                                                               R.anim.rotation);
        mAnim2.setInterpolator(getApplicationContext(),
                              android.R.anim.anticipate_overshoot_interpolator);

        Button button2 = (Button) findViewById(R.id.button2);
        button2.setAnimation(mAnim2);
        //Animation listener 등록
        button2.setAnimationListener(new AnimationAdapter());
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);

        // 화면이 loading되면 animation 시작
        if (hasFocus) {
            mAnim2.start();
        } else {
            mAnim2.reset();
        }
    }

    @Override
    public void onAttachedToWindow() {
        super.onAttachedToWindow();
    }

    @Override
    public void onDetachedFromWindow() {
        super.onDetachedFromWindow();
    }

   //애니메이션 리스너 
    private final class AnimationAdapter implements Animation.AnimationListener {

        public void onAnimationStart(Animation animation) {
            Toast.makeText(getApplicationContext(), "Animation started.", Toast.LENGTH_LONG).show();
        }

        public void onAnimationEnd(Animation animation) {
            Toast.makeText(getApplicationContext(), "Animation ended.", Toast.LENGTH_LONG).show();
        }

        public void onAnimationRepeat(Animation animation) {

        }

    }
}