在 NavigationView 中為 ProgressViewStyle 設置動畫

Question

讓我們制作一個簡單的自定義“無限”微調器。

SwiftUI 提供ProgressView作為原型容器， ProgressViewStyle作為自定義呈現進度方式的手段。

為了使我們的微調器無限旋轉，我們將使用線性 animation，永遠重復它，以 0 的旋轉效果開始，並在微調器出現后立即將其移動到 360 度。

簡單的！

現在讓我們把它放在NavigationView中：

我們看到微調器在旋轉時上下彈跳。 任何線索發生了什么或如何解決問題（同時保留對基本原理的尊重，例如ProgressView顯示進度和ProgressViewStyle自定義它）？

struct SimplePreview: PreviewProvider, View {
    static var previews = Self()
    
    @State
    private var isAnimating = false

    var body: some View {
        NavigationView {
            ProgressView().progressViewStyle(SymbolicStyle())
        }
    }
    
    public struct SymbolicStyle: ProgressViewStyle {
        @State
        private var isAnimating = false

        public func makeBody(configuration: Configuration) -> some View {
            Image(systemName: "circle.hexagonpath.fill")
                .rotationEffect(self.isAnimating ? .degrees(360) : .zero)
                .onAppear {
                    withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
                        self.isAnimating = true
                    }
                }
        }
    }
}

Answer 1

您可以將.onAppear替換為.task ，以便在單獨的上下文中啟動 animation，這樣它就不會與其他不相關的布局事件混淆。