Rotation Animation

안녕하세요. 그린입니다🟢

이번 포스팅에서는 오랜만에 간단히 UI와 관련하여 학습해보겠습니다🙌

바로 Rotation Animation입니다.

요즘 너무 정적인것만? 학습한것 같아서 조금 재밌는걸 해보려합니다!

 

다들 리프레쉬 버튼에 대해서는 알고 계실겁니다.
즉 새로고침과 같이 갱신 버튼을 누르면 화면이 갱신될동안 버튼이 돌고 갱신 후 멈추는 애니메이션을 볼 수 있을겁니다.
오늘은 그거에 대해 간단히 몇가지를 알아보려합니다👍

 

그럼 오늘의 예제는 SwiftUI로 리프레쉬 이미지를 돌리는 애니메이션으로 학습해볼께요!

 

이미지 1회전 하기

이렇게 이미지를 한바퀴만 돌리고 멈추는 코드를 보시죠!

import SwiftUI

struct ContentView: View {
  @State private var isAnimating = false
  
  var body: some View {
    Button(
      action: {
        self.isAnimating.toggle()
      },
      label: {
        Image("RefreshIcon")
          .resizable()
          .frame(width: 80, height: 80)
          .rotationEffect(
            Angle(
              degrees:  self.isAnimating ? 360 : 0
            )
          )
          .animation(
            .linear(
              duration: self.isAnimating ? 1 : 0
            )
          )
      }
    )
  }
}

이렇게 우선 isAnimating 상태 변수를 지정합니다.

이미지를 버튼에 들어가게 조정해준 후 rotationEffect 메서드를 이용하여 몇도 회전을 할지 정해줍니다.

여기서 isAnimating 변수가 true면 한바퀴 회전인 360도를 false면 회전없이 그대로 노출되어야 하니 저렇게 지정해줍니다.

그렇게 회전에 대핸 정의를 해준 후 애니메이션을 넣어줍니다.

우선 1초동안 1번만 돌게 할테니 duration을 true면 1(1초) false면 0(0초)를 줍니다.

즉 false일경우 애니메이션이 동작해도 0초동안 동작하니 결국 없는 애니메이션 동작이라 UI상에는 가만히 있는것처럼 보입니다.

 

다시 클릭하기 전까지 무한 회전하기

이렇게 버튼을 클릭하면 무한히 돌고 버튼을 다시 클릭하면 멈추는 그런 애니메이션을 구현해보겠습니다.

import SwiftUI

struct ContentView: View {
  @State private var isAnimating = false
  var foreverAnimation: Animation {
    Animation.linear(duration: 2.0)
      .repeatForever(autoreverses: false)
  }
  
  var body: some View {
    Button(
      action: {
        self.isAnimating.toggle()
      },
      label: {
        Image("RefreshIcon")
          .resizable()
          .frame(width: 80, height: 80)
          .rotationEffect(
            Angle(
              degrees:  self.isAnimating ? 360 : 0
            )
          )
          .animation(self.isAnimating ? foreverAnimation : .default)
      }
    )
  }
}

위의 한바퀴 돌리는 애니메이션과 거의 상응합니다.

다만 repeatForever의 속성을 구현해 무한히 돌 수 있도록 해줍니다.

그래서 isAnimation Bool 값으로 true 무한히 돌고 false면 default 즉 기본 속성인 한번 동작을 통해 멈추게 해줍니다.

위와 여기서의 코드에서도 isAnimating을 버튼이 누를때 반전주지만 갱신되고 나서 알아서 다시 false로 바꿔주는것이 필요합니다.

이 부분은 여기서 새로운 뷰가 추가되거나 Core 구현이 없어 따로 지정해주지 않아 어색하다고 생각하실겁니다.

요 부분은 다른 구현과 함께 이뤄져야함으로 그 부분에서 처리할 수 있도록 한다라고 이해해주세요🙋🏻

 

마무리

오늘은 간단히 이렇게 UI를 구현하다 얻은 학습을 공유해봤습니다.

animation에 easeIn, easeOut등 다양한 옵션값이 있습니다. 하지만 갱신 애니메이션에서는 default와 linear면 충분하다고 판단됩니다.

하나 더 알았던 사실은 한바퀴가 돌고 다시 클릭 시 즉 isAnimating이 false일때 애니메이션의 linear duration을 0으로 주지 않는다면 다시 거꾸로 돌아가는 애니메이션을 볼 수 있을겁니다.

이 부분에 대해 참 처음에 많이 고민하고 해결을 하고 싶어 우회적으로 한바퀴 돌릴때 기한을 1초와 0초로 주는것처럼 구현했습니다.

다른 좋은 방법이 있다면 댓글 꼭 남겨주시면 감사하겠습니다🙌

 

[참고자료]

https://stackoverflow.com/questions/58315628/repeating-animation-on-swiftui-image?rq=1 

Repeating animation on SwiftUI Image