이전 예제에서
하나의 ImageView에 Frame Animation 하나를
보여줬습니다.
이번 예제 소스는
하나의 ImageView에
여러 동작의 Frame Animation을 실행시켜 보겠습니다.
이전 예제에서는 jump만 했습니다.
이번에는 jump, run, attack 3가지의 동작입니다.
각 각의 애니메이션을 실행하는 버튼을 3개 만들었습니다.
실행 결과먼저 보겠습니다.
이전 포스트를 보셨다면
이번 예제도 별로 어렵지 않을 겁니다.
먼저
3가지 동작의 animation-list.xml 파일을 만들겠습니다.
사용되는 이미지는 첨부했으니 다운받아
본인의 프로젝트에 넣어주시기 바랍니다.
Pink_Run.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도 소개 하도록 하겠습니다.
'소소한 소스코드' 카테고리의 다른 글
| [안드로이드 Android] ViewPager (뷰 페이저) (4) | 2015.06.22 |
|---|---|
| [안드로이드 Android] ViewFlipper (1) | 2015.06.19 |
| [안드로이드 Android] 애니메이션(Animation) - 프레임 애니메이션(Frame Animation) (0) | 2015.06.16 |
| [안드로이드 Android] 리스트 뷰(ListView) 6. Custom ListView(사용자 정의 리스트 뷰) - BaseAdapter (3) | 2015.06.16 |
| [안드로이드 Android] 커스텀 다이얼로그(Custom AlertDialog) -setView() (1) | 2015.06.11 |