안드로이드 애니메이션 Xml이용[Android Animation]

앱개발을 한다면 이 애니메이션 작업은 빠질수 없는 부분중 하나라고 볼수 있습니다. 보통 메뉴 버튼 클릭시 나타나는 사이드바 작업또한

애니메이션 작업이 이뤄지기 때문이지요. 

이처럼 간단한 부분 모두 애니메이션으로 작업되어 있습니다. 안드로이드 애니메이션은 총 4가지로 이루어져 있습니다. 

1. 가장 많이 쓰는 View의 위치를 움직이는 Translate

2. View를 회전시키는 Rotate, 

3. View의 투명도를 조정하는 Alpha

4. View를 확대/축소 시키는 scale

이중에 실제로 프로젝트에 적용했었던 것들은 Translate와 Alpha 정도입니다. 다음 프로젝트나 유지보수중 필요하다면 그때 즈음에나

샘플링 작업을 하면서 한번 사용해볼 예정입니다. 

우선 이 글에서는 제가 작업해 보았던 2가지에 대해서 먼저 설명하겠습니다. 애니메이션작업을 실행하기 위해서는 2가지 방법이 있습니다. 

1. Xml을 이용한 애니메이션 작업처리 입니다. 

2. 직접 코드로 작성하는 방법이 있습니다. 

일단 첫번째 Xml을 이용한 애니메이션 작업에 대하여 설명을 드리도록 하겠습니다.

일단 Xml 처리라 하니 파일을 생성을 하여아합니다. Xml파일은 res -> anim이란 폴더안에 생성하여 주시면 되는데요 anim이란 파일이 

없다면 직접 생성해주시면 되겠습니다.

Anim파일에서 우클릭으로 파일을 생성할려 하시면 Animation resource file이 있는데 맞습니다. 이녀석을 생성해 주시면 되겠습니다.

첫번째는 Translate 입니다.

fromXDelta : 애니메이션이 시작되는 X좌표지점

toXDelta : 애니메이션이 마무리되는 X좌표지점

fromYDelta : 애니메이션이 시작되는 Y좌표지점

toYDelta : 애니메이션이 마무리되는 Y좌표지점

duration : 애니메이션이 실행되는 시간(1000 = 1초)

예제)

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromYDelta="-100%" android:toYDelta="0%"  android:duration="500"/>
</set>

두번째는 Alpha 입니다.

fromAlpha : 애니메이션이 시작되는 알파값

toAlpha : 애니메이션이 마무리되는 알파값

duration : 애니메이션이 실행되는 시간(1000 = 1초)

예제)

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

적용하는 코드입니다.  setFillEnabled 함수는 애니메이션을 실행후 실행한 상태로 지정을 할것인지 아닌지를 설정하는 함수입니다. 기본값이 false로 되어있습니다. 보통 사이드바를 이런 애니메이션으로 처리를 할경우 최초 뷰를 Hidden으로 둿다가 애니메이션이 끝날경우에 Visible로 변경시켜줌으로서 이벤트를 처리합니다.

Animation animation = AnimationUtils.loadAnimation(mContext, R.anim.animation); //Context와 Animation xml파일
animation.setAnimationListener(new Animation.AnimationListener() {  //Animation Listener 순서대로 시작할때, 끝날때, 반복될때
    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationEnd(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
});
animation.setFillEnabled(false);    //애니메이션 이 끝난곳에 고정할지 아닐지
animationView.startAnimation(animation);    //애니메이션 시작

조금 특별한 작업을 하시는 분들이라면 이 코드를 사용하고 난 뒤에 문제점을 발견하셨을 것입니다. setFillEnabled를 True줬을경우 버튼이 있는 뷰를 Translate로 이동을 시킨뒤에 버튼을 클릭하면 Event가 발생하지 않습니다. 이런 문제가 생기는 이유는 뷰만 이동했지 포인트는 옮겨주지 않아서 발생한 현상인데요. 이 방법에 대해서는 다음글에서 설명하도록 하겠습니다.