[Java][Android] AnimationDrawable 로 간단한 프레임 애니메이션 만들기

오늘은 Android 앱에서 AnimationDrawable 클래스를 활용하여  activity_main.xml과 MainActivity.java 두 파일만으로 이미지를 순차적으로 보여주는 애니메이션 효과를 구현해보도록 하겠습니다.

 

먼저 새로운 Android 프로젝트를 생성하거나 기존 프로젝트를 엽니다. 애니메이션에 사용할 이미지 파일들을 준비하여 res/drawable 폴더에 넣어주세요. 

저는 cat1, cat2, cat3 총 3개의 고양이 사진을 넣어놓도록 하겠습니다.

 

그리고 res/drawable 폴더에, anim_loading.xml 파일을 생성하도록 합니다.

 

전체 코드입니다.

 

res/drawable/anim_loading.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/cat1" android:duration="500" />
  <item android:drawable="@drawable/cat2" android:duration="500" />
  <item android:drawable="@drawable/cat3" android:duration="500" />
</animation-list>

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <ImageView
    android:id="@+id/animation_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/anim_loading"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:src="@drawable/cat1" />

  <androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.7" />

  <Button
    android:id="@+id/start_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:text="재생"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/stop_button"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/guideline" />

  <Button
    android:id="@+id/stop_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:text="정지"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/start_button"
    app:layout_constraintTop_toBottomOf="@+id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

  private ImageView animationView;
  private AnimationDrawable loadingAnimation;
  private Button startButton;
  private Button stopButton;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 뷰 초기화
    animationView = findViewById(R.id.animation_view);
    startButton = findViewById(R.id.start_button);
    stopButton = findViewById(R.id.stop_button);

    // AnimationDrawable 객체 가져오기
    loadingAnimation = (AnimationDrawable) animationView.getBackground();

    // Start 버튼 클릭 리스너
    startButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        if (loadingAnimation != null && !loadingAnimation.isRunning()) {
          loadingAnimation.start(); // 애니메이션 시작
        }
      }
    });

    // Stop 버튼 클릭 리스너
    stopButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        if (loadingAnimation != null && loadingAnimation.isRunning()) {
          loadingAnimation.stop(); // 애니메이션 정지
        }
      }
    });
  }

  // Activity가 화면에 나타날 때 애니메이션 시작
  // (선택 사항: onCreate에서 바로 시작하지 않고, 화면에 나타날 때 시작하려면 사용)
  @Override
  public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    // 이 메서드는 액티비티가 화면에 포커스를 얻거나 잃을 때 호출됩니다.
    // 여기서는 버튼 클릭으로 시작/정지하므로 주석 처리합니다.
        /*
        if (hasFocus && loadingAnimation != null && !loadingAnimation.isRunning()) {
            loadingAnimation.start();
        }
        */
  }

  // Activity가 일시정지되거나 종료될 때 애니메이션 정지 (리소스 절약)
  @Override
  protected void onStop() {
    super.onStop();
    if (loadingAnimation != null && loadingAnimation.isRunning()) {
      loadingAnimation.stop();
    }
  }
}

 

 

 

시연 영상입니다.