# Wheel of Fortune

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [Animations](https://lochiwei.gitbook.io/ios/swiftui/anim) ⟩ [examples](https://lochiwei.gitbook.io/ios/swiftui/anim/examples) ⟩

{% embed url="<https://youtu.be/pTIUHmuSitU>" %}

{% tabs %}
{% tab title="💈範例" %}

```swift
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)
    }
}
```

{% endtab %}

{% tab title="📗 參考" %}

* capps ⟩ [Timing Curve animations](https://capps.tech/blog/swiftui-animation-timing-curve) ⭐️
* [cubic-bezier(0, .8, .2, 1)](https://cubic-bezier.com/#0,.8,.2,1)
  {% endtab %}
  {% endtabs %}