[Android/Kotlin 11] 동전 던지기 게임 에니메이션 만들기

소스파일 생성하기

• res 아래에 리소스 디렉토리로 anim, raw를 각각 만들어준다.
• anim에는 애니메이션 xml 파일을 생성하고, raw에는 효과음 파일을 넣어주면 된다.
  
  
  
  

애니메이션 효과 만들기

• set : 애니메이션 그룹으로 여러 가지 애니메이션을 동시에 실행하려고 할 때 사용한다.
• rotate : 회전 애니메이션을 정의, 여기서는 동전을 회전하는 애니메이션에 사용된다.
• translate : 이동 애니메이션을 정의, 여기서는 동전이 위아래로 올라갔다 내려오는 애니메이션에 사용 된다.

// coin_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2500" // 2500초 동안 지속
        android:fromDegrees="0" // 시작 각도 0도
        android:pivotX="50%" // 회전 중심점 50%를 중심으로 회전
        android:pivotY="50%"
        android:toDegrees="5400" // 종료 각도 5400(회전 횟수 조절 가능)
        />

    <translate
        android:duration="1000" 
        android:fromYDelta="0" // Y 시작 좌표 0도
        android:repeatCount="1" // 반복 횟수 1회 반복
        android:repeatMode="reverse" // 애니메이션 반복 모드(reverse: 반복시 이동 방향이 반대로 바뀜)
        android:toYDelta="-300%" // Y 종료 좌표 -300%도(높이의 3배만큼 이동함을 의미)
        />
</set>

애니메이션 적용

• 초기 화면을 셋팅하고 애니메이션과 미디어 파일을 정의한다.
• Handler를 통해 애니메이션을 제어한다.
• state = (0..1).random() : 홀, 짝 랜덤 숫자를 생성한다.
• state가 0이면 뒷면을, 1이면 앞면을 보여준다.
• 동전이 뒤집힐 때마다 미디어 파일을 함께 재생한다.
• 배경으로 넣어준 애니메이션을 상황에 따라 변경할 수 있도록 딜레이 시켜준다.

val coinBtn = binding.coinBtn
val coinImage = binding.coinImage
binding.coinText.setImageResource(R.drawable.coin_text_start)

coinBtn.setOnClickListener {

  val anim: Animation = AnimationUtils.loadAnimation(requireContext(), R.anim.coin_effect)
  coinImage.startAnimation(anim)
  
  Handler(Looper.getMainLooper()).postDelayed( {
    val media: MediaPlayer? = MediaPlayer.create(requireContext(), R.raw.coin_effect)
    state = (0..1).random()
    if (state == 0) {
      coinImage.setImageResource(R.drawable.coin_back)
      binding.coinText.setImageResource(R.drawable.coin_text_no)
      media?.start()
    } else {
      coinImage.setImageResource(R.drawable.coin_front)
      binding.coinText.setImageResource(R.drawable.coin_text_yes)
      media?.start()
    }
  }, 2000)
  Handler(Looper.getMainLooper()).postDelayed({
  	binding.coinCharacter.setImageResource(R.drawable.coin_img02)
  }, 300)
  Handler(Looper.getMainLooper()).postDelayed({
  	binding.coinCharacter.setImageResource(R.drawable.coin_img03)
  }, 2000)
  Handler(Looper.getMainLooper()).postDelayed({
    binding.coinCharacter.setImageResource(R.drawable.coin_img01)
    binding.coinText.setImageResource(R.drawable.coin_text_start)
  }, 3500)
}

최종 이미지

동전을 던지면 총 애니메이션이 3번 바뀌고 다시 첫번째 화면으로 전환된다. 핸들러가 왜 총 4개인지 알 수 있는 부분 !!