> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/anim/examples/spinner.md).

# Spinner

[SwiftUI](/ios/swiftui.md) ⟩ [Animations](/ios/swiftui/anim.md) ⟩ [examples](/ios/swiftui/anim/examples.md) ⟩

![👁️ 預覽](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F42S7VVi9spIgZm7Hbz1E%2Fspinner.gif?alt=media\&token=e032303c-7f22-47d7-aa5d-a254996dde1d)

{% tabs %}
{% tab title="👔 Spinner" %}
{% hint style="danger" %}
⭐️ 注意：

當<mark style="color:red;">**旋轉螢幕**</mark>的時候，使用 implicit animation 的 Spinner 會產生奇怪的「飄移」，但 explicit animation 則不會❗️
{% endhint %}

📗 參考：Thinking in SwiftUI, Ch. 6: Animations (p.113)

```swift
import SwiftUI

// implicit animation
struct Spinner: View {
    // ⭐️ view state
    @State private var animating = false 
    var body: some View { 
        Image(systemName: "rays") 
            // ⭐️ spin
            .rotationEffect(animating ? .degrees(360) : .zero) 
            // ⭐️ forever (without autoreverse)
            .animation(.linear(duration: 2).repeatForever(autoreverses: false))
            // ⭐️ immediately
            .onAppear { self.animating = true }
    }
}

// explicit animation
struct Spinner2: View {
    // ⭐️ view state
    @State private var animating = false 
    var body: some View { 
        Image(systemName: "rays")
            .foregroundColor(.orange)
            // ⭐️ spin
            .rotationEffect(animating ? .degrees(360) : .zero) 
            // ⭐️ immediately
            .onAppear {
                // ⭐️ forever (without autoreverse)
                withAnimation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                    self.animating = true 
                }
            }
    }
}
```

{% endtab %}

{% tab title="👁️ 預覽" %}

```swift
struct ContentView: View { 
    var body: some View {
        VStack {
            Spinner()
            Spinner2()
        }
        .padding(8)
        .border(.secondary)
    }
}
```

{% endtab %}

{% tab title="👥 相關" %}

* is  [implicit vs. explicit](/ios/swiftui/anim/implicit-vs.-explicit.md).
* compare [ProgressView](/ios/swiftui/control/progressview.md).
  {% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="<https://youtu.be/mw8ZRWmhK9E>" %}
{% endtab %}
{% endtabs %}