SwiftUI 고급 애니메이션 라이브러리 사용법

SwiftUI는 Apple에서 개발한 사용자 인터페이스 툴킷으로, 선언형 문법을 통해 매우 간편하게 애니메이션을 구현할 수 있습니다. 이 글에서는 SwiftUI의 고급 애니메이션 라이브러리를 사용해 고수준의 애니메이션을 만드는 방법을 다룹니다.

SwiftUI 애니메이션 기본 개념

SwiftUI에서 애니메이션은 withAnimation 블록을 통해 쉽게 적용할 수 있습니다. 아래 코드는 버튼을 눌렀을 때 뷰의 크기가 변하는 간단한 애니메이션을 보여줍니다.

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

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.scale += 1.0
                }
            }) {
                Text("Animate")
            }
            .padding()

            Rectangle()
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
        }
    }
}

withAnimation 블록 내부의 코드는 자동으로 애니메이션 처리됩니다. 그러나 고급 애니메이션을 구현하려면 커스터마이징 할 수 있는 라이브러리가 필요합니다.

AnimatableModifier 사용하기

SwiftUI의 AnimatableModifier를 사용하면 좀 더 복잡한 애니메이션을 구현할 수 있습니다. 예를 들어, 텍스트의 변화에 따라 애니메이션을 적용하려면 아래와 같은 코드를 사용할 수 있습니다.

swift
struct AnimatingNumberModifier: AnimatableModifier {
    var number: Double

    var animatableData: Double {
        get { number }
        set { number = newValue }
    }

    func body(content: Content) -> some View {
        content.overlay(
            Text(String(format: "%.0f", number))
                .font(.largeTitle)
                .foregroundColor(.black)
        )
    }
}

extension View {
    func animatingNumber(to number: Double) -> some View {
        self.modifier(AnimatingNumberModifier(number: number))
    }
}

struct ContentView: View {
    @State private var number: Double = 0

    var body: some View {
        VStack {
            Text("Tap to animate number")
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 2)) {
                        self.number = 100
                    }
                }
            Rectangle()
                .frame(width: 200, height: 200)
                .animatingNumber(to: number)
        }
    }
}

여기서 AnimatableModifier는 상태 변화를 애니메이션으로 보여줄 수 있게 해줍니다.

파티클 애니메이션 구현하기

고급 애니메이션을 구현하기 위해 파티클 시스템을 만들 수도 있습니다. SwiftUI에서 파티클 시스템을 구현하려면, Canvas 뷰와 타이머를 사용하면 됩니다. 아래 예제는 간단한 파티클 시스템을 보여줍니다.

swift
import SwiftUI
import Combine

struct Particle: Identifiable {
    var id: UUID = UUID()
    var x: CGFloat
    var y: CGFloat
    var color: Color
    var size: CGFloat
}

class ParticleSystem: ObservableObject {
    @Published var particles: [Particle] = []
    var timer: AnyCancellable?

    init() {
        self.timer = Timer.publish(every: 0.05, on: .main, in: .common).autoconnect().sink { _ in
            self.updateParticles()
        }
    }

    func updateParticles() {
        let newParticle = Particle(
            x: CGFloat.random(in: 0...300),
            y: CGFloat.random(in: 0...300),
            color: .blue,
            size: CGFloat.random(in: 5...10)
        )
        particles.append(newParticle)
        if particles.count > 100 {
            particles.removeFirst()
        }
    }
}

struct ParticleView: View {
    @StateObject var particleSystem = ParticleSystem()

    var body: some View {
        ZStack {
            ForEach(particleSystem.particles) { particle in
                Circle()
                    .fill(particle.color)
                    .frame(width: particle.size, height: particle.size)
                    .position(x: particle.x, y: particle.y)
                    .animation(.easeOut(duration: 2))
            }
        }
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }
}

struct ContentView: View {
    var body: some View {
        ParticleView()
    }
}

파티클 시스템은 Timer를 사용해 주기적으로 파티클을 생성하고, ForEach를 사용해 모든 파티클을 화면에 그립니다. 이렇게 하면 실시간으로 파티클 애니메이션을 구현할 수 있습니다.

결론

SwiftUI의 고급 애니메이션 라이브러리를 활용하면 더 복잡하고 독창적인 애니메이션을 구현할 수 있습니다. AnimatableModifier와 파티클 시스템은 이러한 목적을 달성하는 데 유용한 도구입니다. 이 글에서 다룬 내용을 바탕으로 고급 애니메이션을 구현해 사용자 경험을 더욱 향상시킬 수 있을 것입니다.