設定動畫
利用 @State 變數與 view.animation() 來控制動畫。本節新增了讓所有元件（標題、主卡、底卡、文字卡）都可以動起來的動畫設定。
重點
用 @State private var 來宣告 view state，並用來控制 view 的屬性。
用 ternary opeartor (condition ? trueValue : falseValue) 來設定可產生動畫的屬性。
用 view.animation() 來加入動畫。
用 view.onTapGesture() 來設定「觸控功能」（如：改變 view state）
/*
Design+Code - SwiftUI for iOS 13
https://designcode.io/swiftui-animations-and-states
*/
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
// view states
@State private var show = false // ⭐️ 加入 view state
// view body
var body: some View {
ZStack {
TitleView()
.blur(radius: show ? 20 : 0) // ⭐️ 由 state 控制「模糊化」程度
.animation(.default) // ⭐️ 加入動畫
BackCard(.purple)
.scaleEffect(0.9)
.offset(x: 0, y: show ? -400 : -40) // ⭐️ 由 state 控制「平移」程度
.rotationEffect(.degrees(show ? 0 : 10)) // ⭐️ 由 state 控制「旋轉」程度
.rotation3DEffect(.degrees(10), axis: (x: 1, y: 0, z: 0))
.blendMode(.hardLight)
.animation(.easeInOut(duration: 0.5)) // ⭐️ 加入動畫
BackCard(.pink)
.scaleEffect(0.95)
.offset(x: 0, y: show ? -200 : -20)
.rotationEffect(.degrees(show ? 0 : 5))
.rotation3DEffect(.degrees(5), axis: (x: 1, y: 0, z: 0))
.blendMode(.hardLight)
.animation(.easeInOut(duration: 0.3))
// main card
Card()
.blendMode(.hardLight)
.onTapGesture { self.show.toggle() } // ⭐️ 由觸控來控制 state
BottomCard()
.blur(radius: show ? 20 : 0)
.animation(.default)
} // ZStack (container)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.white)
}
}
PlaygroundPage.current.setLiveView(ContentView())
