주사위에 Animation 구현해서 굴림 효과 만들기.

주사위 굴림

야추 다이스는 5개의 주사위를 가지고 한 턴에 3번의 주사위를 굴릴 수 있는 기회를 가지게 된다.

위 기능을 구현하기 위해 'Roll 버튼'을 클릭할 때 마다 (3번의 기회) 주사위의 값이 달라지도록 구현하였다.

주사위와 굴림 기능이 구현된 UI

 

주사위 View는 값에 따라 View가 변경되도록 구현하였는데 값만 덩그러니 변화된 VIew를 사용자가 볼 때
생동감이 없다고 느껴진다는 피드백을 받았다. 따라서 주사위의 값이 변경되는 동안 주사위가 돌아가는 Animation을 
추가하여 값이 변경되고 있음을 표현하려고 한다.

View Animation 추가

안드로이드에서 애니메이션을 구현하는 방법에는 크게 2가지가 있다.

'View Animation'을 이용해 View의 애니메이션을 구현하는 방법과

'Property Animation'을 이용해 View의 속성에 대한 애니메이션을 구현하는 방법이 있다.

해당 어플리케이션에서는 View Animation을 이용해 주사위 View와 관련한 애니메이션을
res/anim 폴더에 xml 파일로 정의한 뒤, 코드에서 사용하기로 결정.

 

• animation_roll_dice_ooo.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/roll_dice_one" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_four" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_three" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_six" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_one" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_five" android:duration="50"/>
    <item android:drawable="@drawable/roll_dice_two" android:duration="50"/>
</animation-list>

이러한 <animation-list> 요소를 활용하여 다음과 같은 애니메이션을 만들 수 있다.

animation_roll_dice_ooo.xml

 

코드 

//View로부터 AnimationDrawable 가져오기
binding.ivRollFirstAnim.setBackgroundResource(R.anim.animation_roll_dice_first)
val rollDiceFirstAnimation = binding.ivRollFirstAnim.background as AnimationDrawable
rollDiceFirstAnimation.stop()

// 애니메이션 작동될 view's AnimationDrawable을 start() or stop()
private fun diceAnimObserver() =
    Observer<List<Boolean>> {
        it?.let { diceAnims ->
            for ((idx, diceAnim) in diceAnims.withIndex()) {
                val animation = when (idx) {
                    0 -> {
                        rollDiceFirstAnimation
                    }
                    ...
                }
                if (diceAnim) {
                    animation.start()
                } else {
                    animation.stop()
                }
            }
        }
    }