How to start an animation immediately after a view appears

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-start-an-animation-immediately-after-a-view-appears]

 

How to start an animation immediately after a view appears

 

SwiftUI 뷰가 나타나자 마자 애니메이션을 시작하고자 하는 경우에, onAppear() modifier를 사용해서 애니메이션을 붙여야 합니다. 먼저 기본 코드를 보여드리고, 이 처리를 쉽게 하기 위한 2개의 확장을 보여줄 것입니다.

 

첫번째, 간단한 버젼 - 다음은 영원히 확대하고 축소하는 원을 만듭니다.

struct ContentView: View {
    @State var scale: CGFloat = 1

    var body: some View {
        Circle()
            .scaleEffect(scale)
            .onAppear {
                let baseAnimation = Animation.easeInOut(duration: 1)
                let repeated = baseAnimation.repeatForever(autoreverses: true)

                return withAnimation(repeated) {
                    self.scale = 0.5
                }
            }
    }
}

 

초기 애니메이션을 자주 추가하려는 경우, 더 쉽게 하기 위해 View 프로토콜에 확장을 추가하는 것은 좋은 생각입니다. 아래 2개의 확장은 원하는 애니메이션을 사용자정의 할 수 있는 animate()와 animateForever()modifiers를 추가하고, 전체 동작을 깔끔하게 마무리 합니다.

extension View {
    func animate(using animation: Animation = Animation.easeInOut(duration: 1), _ action: @escaping () -> Void) -> some View {
        return onAppear {
            withAnimation(animation) {
                action()
            }
        }
    }
}

extension View {
    func animateForever(using animation: Animation = Animation.easeInOut(duration: 1), autoreverses: Bool = false, _ action: @escaping () -> Void) -> some View {
        let repeated = animation.repeatForever(autoreverses: autoreverses)

        return onAppear {
            withAnimation(repeated) {
                action()
            }
        }
    }
}

 

이걸 사용해서, 원을 애니메이션 하는 것은 훨씬 쉽습니다.

Circle()
    .scaleEffect(scale)
    .animateForever(autoreverses: true) { self.scale = 0.5 }