✨combining transitions

SwiftUI ⟩ Animations ⟩ Transitions ⟩ combine

💾 程式

⬆️ 需要： .show(if:)

📗 參考：Mastering SwiftUI, Ch. 9: Animations & Transitions

struct ContentView: View {
    
    // ⭐️ 1. view state for showing/hiding
    @State private var show = false
    
    var body: some View {
        HStack {
            card("Show details", .green)
            card("Here is the details", .purple)
                // ⭐️ 2-1. the transition 
                // should be associated with an animation, won't work on its own.
                .transition(fadeInOut)
                // ⭐️ 3. insert/remove the view
                .show(if: show)            // 🌀 View + .show(if:)
        }
        // ⭐️ 4. event to trigger the insertion/removal
        .onTapGesture { 
            // ⭐️ 2-2. associated animation
            withAnimation(.spring()) { show.toggle() }
        }
        .padding(8)
        .border(.secondary)
    }
    
    /// ⭐️ combining transitions
    var fadeInOut: AnyTransition {
        AnyTransition
            .move(edge: .leading)
            .combined(with: .scale)
            .combined(with: .opacity)
    }
    
    /// card with text
    func card(_ text: String, _ color: Color) -> some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 200, height: 150) 
            .foregroundColor(color) 
            .overlay(
                Text(text)
                    .font(.system(.title, design: .rounded))
                    .bold()
                    .foregroundColor(.white)
                    .padding()
            )
    }
}

📘 手冊

• SwiftUI ⟩ Animations ⟩ AnyTransition ⟩ combined(with:)