SwiftUI) animation(애니메이션), withAnimation이란, 사용하는 방법

회전하는 애니메이션이나, 혹은 변경되는 애니메이션을 추가하고 싶을때 사용하고 싶어서 애니메이션에 대해서 공부를 해보자!

animation(_: , value: )

우선 animation은 instance Method이다.

animation은 modifier의 일종이며, 동일하게 어떠한 뷰를 받았을때, 해당 애니메이션을 처리한 새로운 뷰를 리턴하게 된다.

따라서 animation의 구현부는 다음과 같다.

func animation<V>(
    _ animation: Animation?,
    value: V
) -> some View where V : Equatable

Animation은 두개의 파라미터를 받게된다.

• animation : animation은 어떠한 animation을 수행할것인지에 대한 파라미터이다.
• value: 어떠한 value값이 변했을때 animation을 수행할것인지에 대한 변수를 정해주게 된다.

animation 파라미터

해당 파라미터는 animation의 속도에 관련된 파라미터이다.

• default : 애플에서 정해준 컴포넌트의 애니메이션
• linear : 선형적으로 처음부터 끝까지 동일한 속도의 애니메이션
• easeIn : 처음에는 느렸다가 갈수록 빨라지는 애니메이션
• easeOut : 속도는 빨랐다가 점점 느려지며 멈추게 되는 애니메이션
• spring : 스프링처럼 움직이는 느낌의 애니메이션

재밌는 스프링애니메이션

사실 다른 애니메이션은 이름만 들어도 되게 직관적이다.

duration을 통해서 해당애니메이션에 걸리는 시간을 정해주고 그냥 위에 작성한 느낌으로 작성할수 있지만, spring이라는 애니메이션은 이해하기가 조금 어렵다.

따라서 스프링에 대해서 좀더 작성을 해보자면

스프링은 말그대로 스프링이다.

스프링 파라미터

스프링 파라미터는

• respond : 스프링애니메이션이 작동하는 시간, duration과 동일하다
• dampingFraction : 스프링의 강도를 의미한다.
• blendDuration : The duration in seconds over which to interpolate changes to the response value of the spring.

사실 blendDuration은 잘 모르겠다.

재밌는 점은 스프링강도에 따라서 애니메이션이 다시 정상으로 돌아가는 속도에 차이가 난다.

 

 

애니메이션의 적용

애니메이션은 정확히 어떤식으로 View가 적용되는지에 대해서 이해를 해야한다.

기본적으로 view modifier는 하나의 뷰를 받고, 새로이 만든 뷰를 리턴하는 방식으로 작동을 하게 되는데

이러한 부분에서 예를 들어 offset이나, opacity등을 변수를 통해서 변화하는 식으로 작동을하게되면

우리눈에는 한번에 변화하는것으로 보인다.

이것을 .animation이라는 키워드를 통해서 서서히 변화를 하도록 해주는것이다.

예시코드

struct ContentView: View {
    @State private var isAnimation = true
    
    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(isAnimation ? .yellow : .red)
                .frame(width: isAnimation ? 50 : 100, height: isAnimation ? 50 : 100)
                .animation(.spring(response: 1,dampingFraction: 0.3 ,blendDuration: 40))
            
            Button("Animate") {
                isAnimation.toggle()
            }
        }
    }
}

 

withAnimation()

처음에는 withAnimation에 대해서 이해하기가 어려웠는데 이해하고 나니 엄청 간단했다.

간단하게 설명하자면, 기존의 animation은 animation modifier가 붙은 화면만 애니메이션 처리를 해줬다면

withAnimation은

• {}안에 들어가는 변화되는 값에 영향을 받는 모든 것에 애니메이션 처리를 하라는것이다.

예제를 보면 이해하가기 굉장히 수월하다!

예제코드

struct ContentView: View {
    @State var isAnimation = false
    
    var body: some View {
        VStack {
            Button("Animate") {
                withAnimation(.easeIn(duration: 1)) {
                    isAnimation.toggle()
                }
            }
            Rectangle().foregroundColor(.red)
                .frame(width: 100, height: 100)
                .opacity(isAnimation ? 0 : 1)
        }
    }
}

 

---

참고자료

linear | Apple Developer Documentation

linear | Apple Developer Documentation