안드로이드(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 파일에 재생하고자 하는 이미지 리스트를 넣자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?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 위젯을 레이아웃에 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" 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 을
호출해 종료 하게 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 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
[출처] 녹두장군 (mainia.tistory.com/704)
'프로그래밍 > Android (Java)' 카테고리의 다른 글
ImageView 레이아웃 옵션과 사용예제들 (0) | 2015.01.27 |
---|---|
배경화면 적용하기 (레이아웃 style) (0) | 2015.01.27 |
네트워크 접속 여부 확인하기 (wifi, mobile data) (0) | 2015.01.27 |
3초 뒤 자동 화면 전환 (0) | 2015.01.27 |
타이틀바 및 상태바 제거 (0) | 2015.01.27 |