設定動畫

利用 @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())

Last updated