[SwiftUI] Tutorials5. Animating View and Transitions

SwiftUI를 사용하면 애니메이션 효과가 어디에 적용되는지에 상관없이 뷰나 뷰의 상태를 변경하는 개별적인 애니메이션을 적용할 수 있다.

SwiftUI는 이런 오버랩 및 인터럽트 가능한 애니메이션 등의 모든 복잡한 결합을 당신을 위해 처리한다.

이번 튜토리얼에서는 Landmark앱을 사용하는 사용자의 하이킹을 추적하는 그래프 애니메이션을 적용한다. animation(_ :)를 사용하면 뷰에 애니메이션을 적용하는 것이 얼마나 쉬운지 알 수 있다.

 

Add Hiking Data to the App

프로젝트 파일의 리소스 파일(hikeData.json)을 프로젝트에 추가한다.

Hike.swft를 추가해준다. Landmark구조체와 마찬가지로 Hike구조는 Codable을 준수해야 한다.

import Foundation

struct Hike: Codable, Hashable, Identifiable{
    var id: Int
    var name: String
    var distance: Double
    var difficulty: Int
    var observations: [Observation]
    
    static var formatter = LengthFormatter()
    
    var distanceText: String{
        Hike.formatter.string(fromValue: distance, unit: .kilometer)
    }
    
    struct Observation: Codable, Hashable{
        var distanceFromStart: Double
        
        var elevation: Range<Double>
        var pace: Range<Double>
        var heartRate: Range<Double>
    }
}

이후 Modeldata.swift로 이동해서 hike개체도 landmarks처럼 배열로 로드한다. 하이킹 데이터는 처음 로드한 후에 수정하지 않기 때문에 @Published속성이 필요없다

final class ModelData: ObservableObject{
   @Published var landmarks: [Landmark] = load("landmarkData.json")
    var hikes: [Hike] = load("hikeData.json")
}
...
...
...

Add Animations to Individual View

뷰에 animation(_:)을 사용하면 SwiftUI는 뷰의 애니메이션에 관련된 어떤 프로퍼티의 변경사항도 애니메이션으로 표현할 수 있다.