[Kotlin] View에 로테이트 애니메이션(Rotate Animation) 적용하기

프로젝트를 진행하다보니 가끔 뷰에 애니메이션을 적용하는 것이 필요했다.

복잡한 애니메이션은 잘 적용할 일이 없지만, 회전, 이동 등의 간단한 애니메이션은 생각보다 꽤나 자주 쓰이게 된다.

 

최근 내가 적용한 애니메이션은 Rotate Animation이다.

주로 로딩 프로그래스를 이미지로 만들때 사용하곤 한다.

 

그럼 시간이 없으니 바로 본론으로 들어가 보자.

---

반응형

---

1. 일회성 애니메이션

view.animate().apply {
	duration = 100
	rotation(180f)
}

180도 회전하는 방법이다.

원래대로 돌리려면 rotation에 0을 넣어주면 된다.

view.animate().apply {
	duration = 100
	rotation(0f)
}

---

2. 무한 회전(무한 프로그래스)

무한으로 회전하는 방법도 간단하다.

RotateAnimation 클래스를 사용하면 된다.

view.apply {
    val rotate = RotateAnimation(
        0f, 360f, // 0 ~ 360 도 까지 회전
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f
    )
    rotate.duration = 1000 // 시간에 따라 속도가 조절됨
    rotate.repeatCount = Animation.INFINITE 
    rotate.interpolator = LinearInterpolator()
    startAnimation(rotate)
}

회전할 범위를 지정 후 회전의 중심점을 잡아주기위해 x, y 값을 0.5로 설정한다.

회전 시간에 따라 회전하는 속도가 달라진다.

repeatCount를 무한으로 설정해줘야 뷰가 사라질때까지 회전한다.

interpolator는 Linear로 설정하면 일정한 속도로 회전하게 된다.

다른 interpolator도 많으니 다양하게 적용해 볼 수 있다.

 

---

3. 재실행하기

재실행은 repeatCount 만 아래와 같이 변경해주면 된다.

나는 뷰를 클릭할 때마다 애니메이션이 재실행되도록 했다.

view.setOnClickListener {
    val rotate = RotateAnimation(
        0f, 360f, // 0 ~ 360 도 까지 회전
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f
    )
    rotate.duration = 1000 // 시간에 따라 속도가 조절됨
    rotate.repeatCount = Animation.RESTART 
    rotate.interpolator = LinearInterpolator()
    startAnimation(rotate)
}

※ 주의할 점

아래와 같이 애니메이션을 적용하면 뷰를 클릭 시 1회만 적용된다.

이런 경우에는 애니메이션이 종료되었을 때, 원래 위치로 돌아가도록 적용해주어야 한다.

오히려 더 귀찮아질 수 있으니 위의 코드를 사용하자...!

view.setOnClickListener {
    it.animate().apply {
        duration = 1000    
        rotation(360f)
    }
}