앱을 사용하는 동안 사용자의 걸음을 추적하여 그래프로 보여주는 뷰를 애니메이션화 하여 보여줄 수 있도록 해줍니다.

1. 앱에 하이킹 데이터 추가하기

• 애니메이션을 추가하기 전에 애니메이션화 시킬 하이킹 데이터가 필요합니다.

  

• Hike.swift라는 이름의 스위프트 파일을 만들어 주고, hikeData.json 데이터에 매칭이 되도록 프로퍼티를 정의해줍니다.

  **//  Hike.swift
  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**
  import Foundation
  import Combine
  
  // Combine 프레임워크의 ObservableObject 프로토콜을 준수하는 새로운 모델 타입을 정의합니다.
  final class ModelData: ObservableObject {
      // landmarkData.json 파일을 불러와서 배열로 저장합니다.
      // Observable 객체는 SwiftUI가 변경사항을 감지할 수 있도록 @Published 키워드를 붙여줍니다.
      @Published var landmarks: [Landmark] = load("landmarkData.json")
      **// hikeData.json 파일을 불러와서 배열로 저장합니다. (이후 수정할 일이 없기 때문에 @Published 키워드 안붙여도 됨)
      var hikes: [Hike] = load("hikeData.json")**
  }
  

• 공식 문서에서 다운받은 프로젝트 폴더의 Resources 폴더에 있는 Hikes 폴더를 현재 프로젝트의 View 그룹으로 복사해줍니다.

  

• HikeView.swift 파일을 열어보면 다음과 같이 하이킹 기록을 그래프로 보여주는 뷰를 확인해볼 수 있다.

  

2. 각각의 뷰에 애니메이션 추가하기

• animation(_:) : 동등한 뷰에서 이 모디파이어를 사용할 경우 SwiftUI는 뷰의 색깔, 투명도, 회전, 크기 등의 애니메이션화가 가능한 프로퍼티들의 변화에 대해 애니메이션 효과를 적용해줍니다.
• animation(_:value:) : 동등하지 않은 뷰에서는 이 모디파이어를 사용해서 특정 값이 바뀔 때 애니메이션 효과를 줄 수 있습니다
• 애니메이션 효과의 종류, 애니메이션 효과의 속도, 효과 시작 전 딜레이 등의 설정을 해줄 수 있습니다.

// HikeView.swift
import SwiftUI

struct HikeView: View {
    var hike: Hike
    @State private var showDetail = false

    var body: some View {
        VStack {
            HStack {
                HikeGraph(hike: hike, path: \.elevation)
                    .frame(width: 50, height: 30)

                VStack(alignment: .leading) {
                    Text(hike.name)
                        .font(.headline)
                    Text(hike.distanceText)
                }

                Spacer()

                Button {
                    showDetail.toggle()
                } label: {
                    Label("Graph", systemImage: "chevron.right.circle")
                        .labelStyle(.iconOnly)
                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        **//.animation(nil, value: showDetail)
                        .scaleEffect(showDetail ? 1.5 : 1) // 크기가 변하는 애니메이션 효과**
                        .padding()
                        **//.animation(.spring(), value: showDetail) // showDetail 값이 변경될 때 동작하는 애니메이션 효과**
                }
            }

            if showDetail {
                HikeDetail(hike: hike)
            }
        }
    }
}

3. State 값 변경 시 애니메이션 효과 주기

• 유저가 버튼을 눌러서 showDetail state 변수값을 바꿀 때마다 애니메이션 효과가 적용되도록 해줍니다.

• showDetail state 변수의 영향을 받는 상세보기 버튼 뷰와 HikeDetail 뷰 이렇게 2개의 뷰에 대해해 애니메이션 효과가 적용됩니다.