반응형

안드로이드에서 Animation 을 구현하는 방법은 2가지 입니다.


1. Frame Animation : 여러장의 사진을 바꿔가며 애니메이션을 실행

2. Tween Animaion : 이미지의 위치, 크기, 각도, 투명도를 조절하며 애니메이션 실행


우선 첫번째로

특정 이미지 뷰(ImageView)에 보여지는 그림이 자동으로

변경돼서 애니메이션을 실행하는 Frame Animation을 만들어 보겠습니다.


'START'버튼을 누르면 Animation이 시작됩니다.


동작결과부터 보겠습니다.




위의 Pink 캐릭터가 점프 하는 애니메이션을 위해

여러장의 이미지가 필요합니다.



Pink_Jump.zip



첨부파일로 첨부했으니 다운받으셔서

본인 프로젝트의 drawable-hdpi 폴더에 추가하세요.

(다른 해상도에 넣어도 됩니다.)


프레임 애니메이션(Frame Animation)

만들기 위해 프로젝트의 res폴더

drawable 폴더를 하나 만들고

그 안에 여러장의 이미지를 리스트업 한 xml 파일을 만듭니다.


즉, 여러장의 그림을 보유하고 있는

Drawable(그림 관리 클래스) 리소스를 만든다고 보시면 됩니다.



먼저 이 작업부터 하죠.

혹시나 해서 res폴더>>drawable폴더 생성 과정부터 보여드립니다.

'drawable' 폴더 이름은 절대 틀리면 안됩니다.



  




이제 'drawable' 폴더안에 여러장의 이미지 하나 하나를

Frame으로 하여 변경시킬 수 있는

Animation-list 리소스 파일을 만듭니다.

파일 이름은 'pink_jump' 로 하겠습니다.


역시 그림으로 보겠습니다.


  



'Root element' 로 'animation-list'를 선택하셔야 합니다.(한번 클릭)


이렇게 만들어진

'pink_jump.xml' 파일 입니다.

특별한 설명없이도 Frame당 100ms(0.1초)씩 보여진다는 것을

아실 수 있을 겁니다.


 

 pink_jump.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    

    <item android:drawable="@drawable/pink_jump_001"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_002"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_003"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_004"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_005"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_006"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_007"

        android:duration="100"/>

    

    <item android:drawable="@drawable/pink_jump_008"

        android:duration="100"/>    


</animation-list>



이제 이 Drawable 리소스 파일

설정하는 ImageView가 있는

activity_main.xml 파일입니다.


간단하게 애니메이션을 시작하는 버튼(Button) 1개,

애니메이션을 보여줄 ImageView 1개 입니다.

 

 activity_main.xml

<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"

    tools:context="${relativePackage}.${activityClass}" >

    

    <Button android:id="@+id/button"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="FrameAnimation START"

        android:onClick="mOnClick"/>


    <ImageView 

        android:id="@+id/img"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"        

        android:src="@drawable/pink_jump"/>


</RelativeLayout>


ImageView의 src 로 위에서 만든 pink_jump.xml 파일이 적용되었다는 것이

중요합니다.



이제 Frame Animation이 가능한 상태는 되었습니다.

하지만 실행시켜도 애니메이션을 실행되지 않습니다.

src로 지정된 Drawable 리소스 파일인

pink_jump.xml 파일의 아이템들은

시작부터 자동으로 애니메이션이 되지는 않습니다.


그럼 이 여러장의 그림을 가지고 있는

Drawable 리소스에게 Frame 애니메이션이 실행되되록

소스코드를 만들어 보겠습니다.


주요 설명은 주석을 참고하시기 바랍니다.

'START' 버튼을 누를 때 마다

pink 캐릭터가 Jump 합니다.


 

 MainActivity.java

public class MainActivity extends Activity {

ImageView img;

//FrameAnimation에 의해 Animation을 실행할

//Animation Drawable 객체 참조변수

//즉, Frame 단위로 이미지를 바꿔서 그려주는 Drawable 객체

AnimationDrawable ani;


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//ImageView 객체 참조

img=(ImageView)findViewById(R.id.img);

//ImageView에 src 속성으로 설정된 이미지를 Drawable 객체로 얻어오기. 

//Frame Aniamtion은 Drawable의 일종이므로 형변환 가능

ani=(AnimationDrawable)img.getDrawable();

//Frame Animation을 한번반 실행

//이 코드를 지우면 자동으로 반복함(기본값)

ani.setOneShot(true);

}

//onClick 속성이 지정된 View가 클릭되었을 때 자동으로 호출되는 콜백메소드

public void mOnClick(View v){

switch(v.getId()){

case R.id.button:

//'START' 버튼을 눌렀을 때 이전 Frame Animation이 진행중이면 정지

//Frame Animation은 한번 start()해주면 계속 Running 상태임.

//Frame Animation을 OneShot으로 하고 다시 시작하게 하고 싶다면

//이전 Frame Animation을 'stop'시켜야 함.

if(ani.isRunning()) ani.stop();

//AnimationDrawable 객체에게

//Frame 변경을 시작하도록 함.

ani.start();

break;

}

}

}

 

여기까지 Frame Animation의 기본적인 실행을 보았습니다.


이미지만 많다면 좀더 부드럽게 애니메이션이 진행되겠죠.


다음 포스트에서는 하나의 이미지뷰

여러 종류의 Frame Animation이 실행되도록 하겠습니다.


pink 캐릭터 jump도 하고 run도 하고 attack도 하도록 해보겠습니다.

반응형

+ Recent posts