✨Wheel of Fortune

SwiftUI ⟩ Animations ⟩ examples ⟩

💈範例

import SwiftUI-

struct ContentView: View {
    
    // ⭐️ "keyframe" parameter
    @State private var angle = 0.0
    
    var body: some View {
        ZStack {
            // fortune wheel
            Image("wheel")
                .resizable()
                .scaledToFit()
                .rotationEffect(.degrees(angle))
                .onTapGesture { 
                    // ⭐️ custom timing curve (bezier curve)
                    withAnimation(.timingCurve(0, 0.8, 0.2, 1, duration: 5)){
                        // ⭐️ set new "keyframe"
                        angle += Double.random(in: 360 * 4 ..< 360 * 8)
                    }
                }
            
            // circle
            Circle()
                .fill(.secondary)
                .frame(width: 50)
                .shadow(radius: 5)
                
            // pointer
            Image(systemName: "arrowtriangle.up.fill")
                .shadow(radius: 5)
                .offset(y: -35)
        }
        .padding(8)
        .frame(width: 500, height: 300)
        .border(.secondary)
    }
}

📗 參考

• capps ⟩ Timing Curve animations ⭐️

• cubic-bezier(0, .8, .2, 1)