반응형

이전 예제에서

하나의 ImageView에 Frame Animation 하나를

보여줬습니다.


이번 예제 소스는

하나의 ImageView에

여러 동작의 Frame Animation을 실행시켜 보겠습니다.


이전 예제에서는 jump만 했습니다.

이번에는 jump, run, attack 3가지의 동작입니다.


각 각의 애니메이션을 실행하는 버튼을 3개 만들었습니다.


실행 결과먼저 보겠습니다.




이전 포스트를 보셨다면

이번 예제도 별로 어렵지 않을 겁니다.


먼저

3가지 동작의 animation-list.xml 파일을 만들겠습니다.


사용되는 이미지는 첨부했으니 다운받아

본인의 프로젝트에 넣어주시기 바랍니다.



Pink_Run.zip


Pink_Jump.zip


Pink_Attack.zip



만드는 방법은 이전 포스트를 참고하시기 바랍니다.


첫번째 pink_jump.xml 파일입니다.


주의할 것은 이전 포스트에서는

소스코드(.java)에서 setOneShot을 했다는 것이고

이번 예제에서는 xml 파일에 oneShot 속성으로 부여했다는 겁니다.

 

 pink_jump.xml

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

    android:oneshot="true">

    

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



다음은 pink_run.xml 입니다.

이 애니메이션은 무한 반복되도록 oneShot 속성을 부여하지 않았습니다.

 

 pink_run.xml

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

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>


</animation-list>


다음은 pink_attack.xml 입니다.

oneShot 속성을 주었습니다.

 

 pink_attack.xml

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

    android:oneshot="true">

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>

    

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

        android:duration="100"/>


</animation-list>




3가지 프레임 애니메이션 리소스를 만들었으니

메인 레이아웃을 만들겠습니다.


각 애니메이션을 실행하는 버튼(Button) 3개,

애니메이션이 실행될 ImageView 1개 입니다.


 

 activity_main.xml

<LinearLayout 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:orientation="vertical"

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

    

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

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="RUN START"

        android:onClick="mOnClick"/>

    

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

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="JUMP START"

        android:onClick="mOnClick"/>

    

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

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="ATTACK START"

        android:onClick="mOnClick"/>  


    <ImageView 

        android:id="@+id/img"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"      

        android:src="@drawable/pink_run"

        android:layout_gravity="center"/>


</LinearLayout>



이제 소스파일입니다.

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


다시 말씀드리지만

주석문을 제외하면 얼마 안됩니다.

미리 코드의 길이에 겁먹지 않길 바랍니다.

 

 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 속성으로 설정된 pink_run이미지를 Drawable 객체로 얻어오기. 

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

ani=(AnimationDrawable)img.getDrawable();

//처음 시작하면 Run 애니메이션 실행

//pink_run.xml 리소스는 oneshot이 아니므로 계속 반복됨.

ani.start();

}

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

public void mOnClick(View v){

switch(v.getId()){

case R.id.btn_run:

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

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

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

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

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

//ImageView에 pink_run.xml Drawable 리소스파일 세팅

img.setImageResource(R.drawable.pink_run);

//ImageView는 설정된 xml 리소스 파일을 Drawable 객체로 가지고 있으므로

//이를 다시 얻어옴.

ani=(AnimationDrawable)img.getDrawable();

//AnimationDrawable 객체에게

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

ani.start();

break;

case R.id.btn_jump:

//이전 Frame Animation이 진행중일 수도 있으므로 'stop'시켜야 함.

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

//ImageView에 pink_jump.xml Drawable 리소스파일 세팅

img.setImageResource(R.drawable.pink_jump);

//ImageView는 설정된 xml 리소스 파일을 Drawable 객체로 가지고 있으므로

//이를 다시 얻어옴.

ani=(AnimationDrawable)img.getDrawable();

//AnimationDrawable 객체에게

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

ani.start();

break;

case R.id.btn_attack:

//이전 Frame Animation이 진행중일 수도 있으므로 'stop'시켜야 함.

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

//ImageView에 pink_attack.xml Drawable 리소스파일 세팅

img.setImageResource(R.drawable.pink_attack);

//ImageView는 설정된 xml 리소스 파일을 Drawable 객체로 가지고 있으므로

//이를 다시 얻어옴.

ani=(AnimationDrawable)img.getDrawable();

//AnimationDrawable 객체에게

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

ani.start();

break;

}

}

}


여기 까지가 Frame Animation 입니다.


다음에 시간 여유가 있을 때 Tween Animation도 소개 하도록 하겠습니다.

반응형

+ Recent posts