✨Spinner

SwiftUI ⟩ Animations ⟩ examples ⟩

👁️ 預覽

👔 Spinner

⭐️ 注意：

當旋轉螢幕的時候，使用 implicit animation 的 Spinner 會產生奇怪的「飄移」，但 explicit animation 則不會❗️

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

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 
                }
            }
    }
}

👁️ 預覽

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

👥 相關

• is implicit vs. explicit.

• compare ProgressView.

🖥️ 影片