스레드 애니메이션

여러 이미지를 연속으로 바꾸어주면 만화 같은 효과를 보여줄 수 있습니다.

옛날에 미키마우스 만화가 만들어지던 방식이죠.

만화처럼 일정 시간 동안 같은 크기의 이미지가 약간씩 바뀌도록 하려면 스레드를 사용할 수 있습니다.

스레드를 이용해 이미지를 계속 바꾸어줄 수 있습니다.

스레드와 핸들러에 대해서는 이미 잘 이해하고 있으니 스레드를 이용해 애니메이션을 만드는 방법에 대해 알아봅시다.

화면 레이아웃 만들기

화면에 이미지뷰를 추가하고 이 이미지뷰에 보이는 이미지를 일정 시간 동안 연속적으로 바뀌도록 만들어봅니다.

아래와 같이 XML 레이아웃에 ImageView 태그를 추가합니다.

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

이미지뷰에는 이미지를 설정할 수 있는데, 설정할 이미지는 미리 만들어져 있어야 합니다.

이미지 파일이 /res/drawable 폴더 안에 들어있다면 이 이미지를 비트맵 드로어블로 만들고 ArrayList 안에 넣어둘 수 있습니다.

public class MainActivity extends AppCompatActivity {
  ArrayList<Drawable> drawableList = new ArrayList<Drawable>();

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

    Resources res = getResources();
    drawableList.add(res.getDrawable(R.drawable.emo_im_laughing));
    drawableList.add(res.getDrawable(R.drawable.emo_im_crying));
    drawableList.add(res.getDrawable(R.drawable.emo_im_happy));
    drawableList.add(res.getDrawable(R.drawable.emo_im_sad));
    drawableList.add(res.getDrawable(R.drawable.emo_im_surprised));

  }

Resources 객체에 정의되어 있는 getDrawable 메소드를 사용하면 res/drawable 폴더 안에 들어있는 이미지 파일을 드로어블 객체로 만들 수 있습니다. 이 코드는 onCreate 메소드 안에 있어도 되고 다른 메소드 안에 있어도 됩니다.

이렇게 만들어진 드로어블 객체들은 애니메이션이 동작하기 전에 ArrayList 안에 들어가 있도록 하면 됩니다.

이제 스레드를 이용해 이 이미지들을 바꿔가면서 보여줄 것입니다.

 

스레드로 이미지 바꾸어주기

스레드를 위한 클래스를 하나 만들어줍니다. run 메소드 안에서 일정 시간 간격으로 이미지뷰의 이미지를 다른 이미지로 설정하면 됩니다.

class AnimThread extends Thread {
  public void run() {
    int index = 0;
    for (int i = 0; i < 100; i++) {
      final Drawable drawable = drawableList.get(index);
      index += 1;
      if (index > 4) {
        index = 0;
      }

     handler.post(new Runnable() {
       public void run() {
         imageView.setImageDrawable(drawable);
       }
    });


    try {
      Thread.sleep(500);
    } catch(Exception e) {
      e.printStackTrace();
    }
  }
}

이미지뷰에 드로어블 객체를 설정할 때는 setImageDrawable 메소드를 사용할 수 있습니다.

그런데, 이미지뷰를 접근하는 이 코드가 스레드 안에 들어 있으므로 문제가 발생합니다. 즉, 별도로 만들어진 스레드 안에서 UI 객체인 이미지뷰를 접근하면 동시 접근의 문제가 발생하므로 반드시 핸들러를 사용해야 합니다.

핸들러를 사용할 때는 Handler 객체를 하나 정의한 후 post 메소드를 호출하는 것이 가장 간단합니다. post 메소드를 호출하면서 전달하는 Runnable 객체 안에 setImageDrawable 메소드를 호출하는 코드를 넣어주면 해당 코드가 메인 스레드에서 동작하면서 이미지를 변경해주게 됩니다.