반복 및 그룹 애니메이션: 애니메이션을 반복하거나 무한 루프로 실행하는 방법과 여러 애니메이션을 그룹으로 묶어 동시에 실행하는 방법

SwiftUI는 애플의 최신 UI 프레임워크로, 선언형 문법을 통해 간결하고 직관적으로 사용자 인터페이스를 구축할 수 있습니다. SwiftUI의 강력한 기능 중 하나는 애니메이션을 쉽게 적용하고 관리할 수 있다는 점입니다. 특히 애니메이션을 반복하거나 여러 애니메이션을 그룹으로 묶어 동시에 실행하는 기능은 사용자 경험을 더욱 향상시킬 수 있는 중요한 요소입니다. 이번 글에서는 애니메이션을 반복하거나 무한 루프로 실행하는 방법과 여러 애니메이션을 그룹으로 묶어 동시에 실행하는 방법에 대해 자세히 알아보겠습니다.

반복 애니메이션

애니메이션을 반복하면 특정 효과를 지속적으로 제공할 수 있어, 사용자에게 동적인 느낌을 줍니다. SwiftUI에서는 .repeatCount()와 .repeatForever() modifier를 사용하여 애니메이션을 반복할 수 있습니다.

.repeatCount()를 사용한 반복 애니메이션

.repeatCount() modifier는 애니메이션을 지정된 횟수만큼 반복합니다. 예제를 통해 사용 방법을 살펴보겠습니다.

swift
import SwiftUI

struct ContentView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        VStack {
            Spacer()

            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .onAppear {
                    withAnimation(Animation.easeInOut(duration: 1.0).repeatCount(5, autoreverses: true)) {
                        scale = 2.0
                    }
                }

            Spacer()
        }
    }
}

위 코드에서 Circle 뷰의 크기가 커졌다 작아지는 애니메이션을 5회 반복합니다. .repeatCount(5, autoreverses: true) modifier를 사용하여 애니메이션을 5회 반복하며, autoreverses: true 옵션을 통해 애니메이션이 역방향으로도 실행되도록 설정했습니다.

.repeatForever()를 사용한 무한 루프 애니메이션

.repeatForever() modifier는 애니메이션을 무한히 반복합니다. 무한 루프 애니메이션을 적용하면 특정 효과를 지속적으로 유지할 수 있습니다.

swift
import SwiftUI

struct ContentView: View {
    @State private var rotation: Double = 0.0

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(rotation))
                .onAppear {
                    withAnimation(Animation.linear(duration: 2.0).repeatForever(autoreverses: false)) {
                        rotation = 360.0
                    }
                }

            Spacer()
        }
    }
}

위 코드에서 Rectangle 뷰가 360도 회전하는 애니메이션을 무한히 반복합니다. .repeatForever(autoreverses: false) modifier를 사용하여 애니메이션이 역방향으로 실행되지 않도록 설정했습니다.

그룹 애니메이션

여러 애니메이션을 그룹으로 묶어 동시에 실행하면, 다양한 효과를 조합하여 복잡한 애니메이션을 구현할 수 있습니다. SwiftUI에서는 Animation 구조체를 사용하여 그룹 애니메이션을 설정할 수 있습니다.

예제: 위치와 투명도 변화의 그룹 애니메이션

다음은 위치와 투명도 변화를 동시에 적용하는 그룹 애니메이션 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    @State private var moveRight = false
    @State private var opacity: Double = 1.0

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 100)
                .offset(x: moveRight ? 150 : -150)
                .opacity(opacity)
                .onAppear {
                    let animation = Animation.easeInOut(duration: 2.0)
                    withAnimation(animation) {
                        moveRight.toggle()
                        opacity = moveRight ? 0.0 : 1.0
                    }
                }

            Spacer()
        }
    }
}

위 코드에서 Rectangle 뷰가 x축 방향으로 이동하면서 동시에 투명도가 변하는 애니메이션을 그룹으로 실행합니다. Animation.easeInOut(duration: 2.0)를 사용하여 애니메이션을 정의한 후, withAnimation 블록 내에서 두 상태 변화를 동시에 적용했습니다.

예제: 크기, 색상, 회전 변화의 복합 그룹 애니메이션

다음은 크기, 색상, 회전 변화를 동시에 적용하는 복합 그룹 애니메이션 예제입니다.

swift
import SwiftUI

struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    @State private var color: Color = .blue
    @State private var rotation: Double = 0.0

    var body: some View {
        VStack {
            Spacer()

            Circle()
                .fill(color)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .rotationEffect(.degrees(rotation))
                .onAppear {
                    let animation = Animation.easeInOut(duration: 2.0)
                    withAnimation(animation) {
                        scale = 2.0
                        color = .red
                        rotation = 360.0
                    }
                }

            Spacer()
        }
    }
}

위 코드에서 Circle 뷰가 크기, 색상, 회전을 동시에 변화시키는 애니메이션을 그룹으로 실행합니다. Animation.easeInOut(duration: 2.0)를 사용하여 애니메이션을 정의한 후, withAnimation 블록 내에서 세 가지 상태 변화를 동시에 적용했습니다.

결론

SwiftUI를 사용하면 애니메이션을 반복하거나 여러 애니메이션을 그룹으로 묶어 동시에 실행하는 기능을 손쉽게 구현할 수 있습니다. .repeatCount()와 .repeatForever() modifier를 사용하여 애니메이션을 반복하거나 무한 루프로 실행할 수 있으며, Animation 구조체를 사용하여 다양한 애니메이션을 그룹으로 묶어 동시에 실행할 수 있습니다. 이러한 기능을 적절히 활용하면 사용자 경험을 더욱 향상시키고, 인터페이스를 동적이고 매력적으로 만들 수 있습니다. SwiftUI의 강력한 애니메이션 기능을 잘 이해하고 활용하여, 보다 창의적이고 흥미로운 애플리케이션을 만들어 보세요.