Drawing and Animation - Animating Views and Transitions

這邊主要是學 animation(:) 是怎麼使用的。

詳細的教學請移動至官方網站的教學

這邊主要紀錄我覺得比較重要的地方：

在視圖或物件處加上 .animation(.easeInOut)　或　 .animation(.spring())，

就會有動畫過度的效果。

上面分別為簡單的兩個效果。另外也可以試試看 .fluid 以及其他的效果。

除了官網之外更為詳細的介紹可以查看下面兩個連結：

Basics of SwiftUI Animation

在 SwiftUI 中設置漸變動畫 (animated gradient) 的 3 個方法

知道大概運作的方式之後，官方的教學就把按鈕與下面動畫的開啟和

關閉透過 withAnimation 綁定在一起。

下面為主要頁面的程式碼。

import SwiftUI

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        let insertion = AnyTransition.move(edge: .trailing)
            .combined(with: .opacity)
        let removal = AnyTransition.scale
            .combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

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)
                    .animation(nil)

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

                Spacer()

                Button(action: {
                    withAnimation {
                        self.showDetail.toggle()
                    }
                }) {
                    Image(systemName: "chevron.right.circle")
                        .imageScale(.large)
                        .rotationEffect(.degrees(showDetail ? 90 : 0))
                        .scaleEffect(showDetail ? 1.5 : 1)
                        .padding()
                }
            }

            if showDetail {
                HikeDetail(hike: hike)
                    .transition(.moveAndFade)
            }
        }
    }
}

struct HikeView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            HikeView(hike: ModelData().hikes[0])
                .padding()
            Spacer()
        }
    }
}

連我都覺得這篇寫得很隨便 呵呵.