안드로이드(Android) 에서 프레임 애니메이션 만들기

안드로이드(Android) 에서 프레임 애니메이션 만들기

 

개발환경 : window 7 64bit, Eclipse Kepler, Android 4.2.2

 

이번 주제는 안드로이드에서 ImageView 에 여러가지 그림을 연속적으로

보여주며 애니메이션 효과를 만들어 보는 것이다. 애니메이션의 원리는

알다시피 여러장의 그림을 연속적으로 보여주면서 눈을 속이는 것이다.

 

안드로이드는 이런 한장한장의 그림을 연속적으로 이어서 재생 될수 있도록

클래스를 제공한다. 그 클래스는 android.graphics.drawable.AnimationDrawable 이다.

위젯 ImageView 에서 getBackground 함수를 이용해 얻을 수 있다.

이렇게 얻은 AnimationDrawable 를 이용해 Start, Stop 호출해서 애니메이션의

시작과 종료를 할수 있다.

 

(1) 애니메이션 구현을 위한 여러장의 스틸사진 준비

 

사진은 PNG 이미지로 준비한다. 그리고 drawable 폴더에 넣어둔다.

 

(2) animation list xml 파일 작성

 

ImageView 에 셋팅할 animation list xml 파일이 필요하다. 이곳에 애니메이션에

필요한 스틸사진들의 이름을 차례대로 넣으면 된다.

먼저 drawable 폴더에서 xml 파일을 생성하자. 생성할때 Root Element 를

Animation-list 로 하자.

 

 

생성된 xml 파일에 재생하고자 하는 이미지 리스트를 넣자.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
     android:oneshot="false" >
    
<item android:drawable="@drawable/naruto01" android:duration="210" />
    <item android:drawable="@drawable/naruto02" android:duration="210" />
    <item android:drawable="@drawable/naruto03" android:duration="210" />
    <item android:drawable="@drawable/naruto04" android:duration="210" />
    <item android:drawable="@drawable/naruto05" android:duration="210" />
    <item android:drawable="@drawable/naruto06" android:duration="210" />
    <item android:drawable="@drawable/naruto07" android:duration="210" />
    <item android:drawable="@drawable/naruto08" android:duration="210" />
    <item android:drawable="@drawable/naruto09" android:duration="210" />
    <item android:drawable="@drawable/naruto10" android:duration="210" />
    <item android:drawable="@drawable/naruto11" android:duration="210" />
    
</animation-list>

 

(3) main layout 파일에 ImageView 위젯을 추가

 

애니메이션을 표현할 ImageView 위젯을 레이아웃에 추가한다.

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/imageAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true" />

</RelativeLayout>

 

(4) main activity 에서 애니메이션 표현 하기

 

소스는 간단하다. ImageView 객체를 얻어온후 setBackgroundResource 함수를 이용해

Animation-list xml 을 셋팅한다. 그리고 ImageView 에서 AnimationDrawable 객체를

얻어낸다.

실질적으로 애니메이션의 동작을 제어하는 객체는 AnimationDrawable 가 된다.

시작과 종료는 onWindowFocusChanged 에 구현되어 있는데 Activity 가 활성화

되어있으면 시작하고 화면이 바뀌거나 종료되어서 포커스를 잃게 되면 Stop 을

호출해 종료 하게 된다.

 

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ImageView;

public class MainActivity extends Activity {

	private AnimationDrawable frameAnimation;
    private ImageView view;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		// 컨트롤 ImageView 객체를 가져온다
        view = (ImageView) findViewById(R.id.imageAnimation);
 
        // animation_list.xml 를 ImageView 백그라운드에 셋팅한다
        view.setBackgroundResource(R.drawable.frame_animation_list);
 
        // 이미지를 동작시키기위해  AnimationDrawable 객체를 가져온다.
        frameAnimation = (AnimationDrawable) view.getBackground();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	// 어플에 포커스가 가면 동작한다
	@Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            // 어플에 포커스가 갈때 시작된다
            frameAnimation.start();
        } else {
            // 어플에 포커스를 떠나면 종료한다
            frameAnimation.stop();
        }
    }
}

 

(5) 실행 화면과 프로젝트 파일

 

프로젝트 파일 링크 :    AnimateSample.zip