Swiftui 视图更新后，微调器动画开始反弹

我有一个图像，我应用360度旋转，以产生加载/旋转的效果。它工作正常，直到我在下面添加文本，图像仍会旋转，但会垂直反弹

下面是查看它的代码：

import SwiftUI

@main
struct SpinnerApp: App {    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    @State var isAnimating = false
    @State var text = ""
    
    var animation: Animation {
        Animation.linear(duration: 3.0)
            .repeatForever(autoreverses: false)
    }

    var body: some View {
        HStack {
            Spacer()
            VStack {
                Circle()
                    .foregroundColor(Color.orange)
                    .frame(height: 100)
                    .rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
                    .animation(self.isAnimating ? animation : .default)
                    .onAppear { self.isAnimating = true }
                    .onDisappear { self.isAnimating = false }
                if self.text != "" {
                    Text(self.text)
                }
            }
            Spacer()
        }
        .background(Color.gray)
        .onAppear(perform: {
            DispatchQueue.main.asyncAfter(deadline: .now()+4, execute: {
                self.text = "Test"
            })
        })
    }
}

我将图像替换为一个圆，因此您将无法看到旋转/动画，但在设置文本后，您可以看到圆垂直反弹。如果文本从一开始就存在，并且没有改变，那么一切都很好。只有在稍后添加文本或在某个点更新文本时，才会发生此问题

---

有没有办法解决这个问题？

尝试使用显式动画，使用

withAnimation

。使用

.animation（）

时，SwiftUI有时也会尝试设置视图位置的动画

struct ContentView: View {
    @State var isAnimating = false
    @State var text = ""
    
    var animation: Animation {
        Animation.linear(duration: 3.0)
            .repeatForever(autoreverses: false)
    }

    var body: some View {
        HStack {
            Spacer()
            VStack {
                Circle()
                    .foregroundColor(Color.orange)
                    .overlay(Image(systemName: "plus")) /// to see the rotation animation
                    .frame(height: 100)
                    .rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
                    .onAppear {
                        withAnimation(animation) { /// here!
                            self.isAnimating = true
                        }
                    }
                    .onDisappear { self.isAnimating = false }
                
                if self.text != "" {
                    Text(self.text)
                }
            }
            Spacer()
        }
        .background(Color.gray)
        .onAppear(perform: {
            DispatchQueue.main.asyncAfter(deadline: .now()+4, execute: {
                self.text = "Test"
            })
        })
    }
}

结果:

---

只需将动画链接到从属状态值，如

//... other code
.rotationEffect(Angle(degrees: self.isAnimating ? 360 : 0.0))
.animation(self.isAnimating ? animation : .default, value: isAnimating)  // << here !!
//... other code

/。。。其他代码
.旋转效应（角度（度：自旋转？360:0.0））
.animation（self.isAnimating？animation:.默认值，值：isAnimating）//我尝试了此操作，但圆仍在上下移动-奇怪！我在最新的测试版上试用过，所以这可能是我们得到不同结果的原因。Asperi的解决方案非常有效。谢谢非常感谢。如果没有你的帮助，我想我不可能学习SwiftUI。谢谢，我欠你很多！