안드로이드 레이아웃 이동 애니메이션 구현하기

안드로이드 개발을 하다보면, 예쁜 애니메이션을 넣어달라고 요청이 들어오곤 한다.

 

왠만한 애니메이션들은 이미 라이브러리로 많지만, 간단히 레이아웃을 움직여 달라는 요청들은 직접 구현을 해야하는데,

 

그럴경우 어떤 방법으로 애니메이션을 구현하는게 가장 좋을까?

 

구식 방법으로는 다음과 같은 방법이 있었다.

 

TranslateAnimation anim = new TranslateAnimation(0, amountToMoveRight, 0, amountToMoveDown);
anim.setDuration(1000);

anim.setAnimationListener(new TranslateAnimation.AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) { }

    @Override
    public void onAnimationRepeat(Animation animation) { }

    @Override
    public void onAnimationEnd(Animation animation) 
    {
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams)view.getLayoutParams();
        params.topMargin += amountToMoveDown;
        params.leftMargin += amountToMoveRight;
        view.setLayoutParams(params);
    }
});

view.startAnimation(anim);

 

매우 구린 방법인데, 더군다나 이 방법을 쓰게되면 onAnimationEnd에서 flicker 현상이 일어난다.

 

그럼 좋은 방법은 무엇일까?

 

좋은 방법으로는 ObjectAnimator라는 클래스가 있다.

 

API 11 부터 추가된 이 기능은 막상 문서를 보고 하려그러면 매우 복잡하다.

참고) https://developer.android.com/reference/android/animation/ObjectAnimator

불러오는 중입니다...

그럼 심플하게 소스로 만들어보자.

 

먼저 상단으로 100px만큼 0.3초동안 이동하는 소스이다.

 

yourView.setOnClickListener {
    ObjectAnimator.ofFloat(yourView, "translationY", -100f).apply {
        duration = 300
        start()
    }
}

 

아마 다들 알겠지만, 안드로이드에서 좌표값은 좌측 상단이 (0,0) 이므로 우리가 평소 알고있는 상하와 반대이다.

 

따라서 상단으로 올리려면 마이너스 값을 주어야 한다.

 

그럼 되돌아오는 애니메이션을 넣으려면 어떻게해야 할까?

 

yourView.setOnClickListener {
    ObjectAnimator.ofFloat(yourView, "translationY", 0f).apply {
        duration = 300
        start()
    }
}

 

여기서 주의할점은 100f가 아니라 0f라는 점이다.

 

해당 뷰가 원래 있어야할 자리를 0을 기준으로 한다.

 

그래서 상단으로 100f만큼 이동한 뒤에, 그 위로 100f만큼 더 이동하고싶다면 200f의 값을 주어야한다.