SwiftUI를 사용할 때, 뷰 또는 뷰의 상태에 개별적으로 애니메이션을 적용할 수 있다. SwiftUI는 결합되고 중첩되고 인터럽트되는 복잡한 애니메이션을 다룰 수 있다. 이번 튜토리얼에서는 랜드마크 앱을 사용하는 동안 사용자의 하이킹을 추적하고 애니메이션이 포함된 그래프로 나타내보자.

Section 1. Add Hiking Data to the App

애니메이션을 적용하기 전에 애니메이션을 적용할 대상이 필요하므로 하이킹 데이터를 가져오고 모델링하자. 그 이후 해당 데이터를 그래프에 정적으로 표시해보자.

ModelData.swift

// SwiftUI는 observable 객체를 구독하고, 데이터가 변경되었을 때 리프레시가 필요한 모든 뷰를 업데이트 한다.
final class ModelData: ObservableObject {
    // Observable 객체는 Subscriber가 변경 사항을 선택할 수 있도록 변경할 데이터에 Published 프로퍼티 래퍼 적용
    @Published var landmarks: [Landmark] = load("landmarkData.json")
    // Hike 데이터는 초기화 후 수정되지 않기 때문에 @Published를 붙일 필요 없음
    var hikes: [Hike] = load("hikeData.json")
}

func load<T: Decodable>(_ filename: String) -> T {
    let data: Data
    
    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \\(filename) in main bundle.")
    }
    
    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \\(filename) from main bundle:\\n\\(error)")
    }
    
    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \\(filename) as \\(T.self):\\n\\(error)")
    }
}

Hikes 뷰는 리소스에서 복사해서 빠르게 만들어보자.

Section 2. Add Animations to Individual Views

animation(_:) modifier를 equatable 뷰에서 사용하면 SwiftUI는 사용 가능한 프로퍼티에 대한 모든 변경을 애니메이션화 할 수 있다. 뷰의 색상, 불투명도, 회전, 크기 등 모두 애니메이션을 적용할 수 있으며 뷰가 equatable 하지 않을 때는 animation(_:value:) modifier를 사용하면 지정된 값이 변경될 때 애니메이션을 시작시킬 수 있다.

animation(_:)

func animation(_ animation: Animation?) -> some View

해당 뷰가 변경되면 지정된 애니메이션을 뷰에 적용한다.

해당 타입(Self)은 Equatable 프로토콜을 준수해야 한다.

animation(_:value:)

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