4. Tween Animation

이번에는 안드로이드의 시각적인 부분과 기능을

한껏 올려줄 수 있는 Animation 기능에 대해 알아보겠습니다.

그리고 Animation을 이용해서 페이지 슬라이딩 기능도

구현해 보도록 하겠습니다~~

===============================================

Tween Animation

1.  Tween Animation 기능으로 무엇을 하는 것일까?

 안드로이드에서 Animation을 여러 가지 방법으로 제공합니다. 그중에서 가장 간단하게 많이 사용되는 Animation이 Tween Animation입니다.

 이러한 Tween Animation을 사용하여 뷰의 이동, 확대 / 축소, 회전과 같이 일정한 패턴을 가지고 움직이는 애니메이션을 구현할 수 있게 됩니다.

   

   - 투명도 변환 (Alpha Animation)

   - 회전 (Rotate Animation)

   - 크기 변환 (Scale Animation)

   - 위치 이동 (Translate Animation)

 2.  Tween Animation 기능은 어떻게 구현될까?

   

[출처] Do it! 안드로이드 앱 프로그래밍

Tween Animation의 동작 원리는 위의 사진과 같습니다.

① xml 파일에 뷰의 애니메이션이 어떻게 동작할 것인지 정의

② xml을 Animation 객체로 로딩하여 Animation 객체를 생성

③ 뷰에 생성된 Animation 객체를 동작

만들기에 따라서 뷰가 이동, 확대/축소, 회전과 같은 효과를 나타내어 사용자에게 뛰어난 시각효과를 줄 수 있는데 그 기능을 구현하는 것은 생각보다 간단합니다.

 3.  간단한 Tween Animation 기능을 구현해보자!

 가장 간단하게 Tween Animation을 이용하여 버튼을 눌렀을 시 TextView의 글자가 이동하도록 애니메이션을 적용해보겠습니다.

 

① 일단 애니메이션을 동작시킬 xml파일 생성해야 합니다. 

    이 xml 파일은 다른 레이아웃처럼 res 하위 폴더인 layout에 생성하는 것이 아니라 res 밑에 새로운 anim 디렉토리를 생성하여 그 안에 xml 파일을 생성시켜        주어야 합니다.

② flow.xml 파일 안에는 애니메이션이 동작할 기능을 정의해주시면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="1500"
        android:repeatCount="3"/>
</set>

  저는 textView에 있는 글자가 오른쪽에서 왼쪽으로 1.5초간 3번 반복하도록 설정하였습니다.

    - duration : 몇 ms동안 Animation을 실행시킬 것인가?

    - repeatCount : 얼마만큼 Animation을 반복시킬 것인가?

    - fromXDelta / fromYDelta : 어디서부터 시작할 것인가?

    - toXDelta / toYDelta : 어디까지 실행시킬 것인가?

③ layout에는 Animation을 실행시킬 버튼과 Animation을 적용할 textView를 구성하겠습니다.

   

 ④ 이제 만들어진 flow.xml 파일의 액션 정보를 통해 Animation 객체를 생성하고 뷰에 적용하면 됩니다.

TextView textView;

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

    textView = (TextView) findViewById(R.id.textView);

    Button button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.flow);
            textView.startAnimation(animation);
        }
    });
}

  

위 코드에서 Animation 객체를 생성하는 코드는 AnimationUils 클래스의 loadAnimation() 메소드를 사용해서 메모리에 객체로 로딩할 수 있습니다.

위 코드는 단순히 textView에 Animation 객체를 적용하는 것이기 때문에 startAnimation() 메소드 호출만으로도 작동시킬 수 있습니다.

위의 결과로는 버튼만 누르면 안녕! 이라는 text가 textView 안에서 오른쪽에서 왼쪽으로 이동하게 되는 애니메이션이 작동되는데 이는 애니메이션을 적용함과 동시에 애니메이션이 시작하는 단순한 기능입니다.

애니메이션을 적용함과 동시에 애니메이션을 시작하고 싶다면 startAnimation() 메소드만 호출하면 되지만 애니메이션이 시작할 때, 끝날 때를 동작해야 할 기능이 있다면 AnimationListener 클래스를 이용하여 구현할 수 있습니다.

AnimationListener 클래스 이용은 Page Sliding에서 사용하여 구현해 보겠습니다.