【Day 26】SwiftUI - Drawing and Animation

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()
        }
    }
}

连我都觉得这篇写得很随便 呵呵.