SwiftUI 旋转动画有意想不到的翻译

Question

我正在尝试使用标准且一致的在线教程在 SwiftUI View 中为旋转的“忙碌”图像制作动画。图片是方形的，应该统一缩放，永远旋转。

我可以用下面的代码得到一个旋转的图像，但是我看到了意想不到的翻译。当在 NavigationView 中用作 initial View 时，图像会在动画过程中从左上角移动到屏幕中央。当用作 NavigationView 中的第三个屏幕时，图像大致从屏幕中央开始，并在动画过程中垂直向下移动大约其高度的一半。移除 navigationBar 和后退按钮可将垂直偏移整体减少至约 20px。这很有趣。

同样有趣的是，在这两种情况下，背景都保持在我期望的位置，在屏幕中央。 autoreverses 表现符合预期，anchor 旋转效果似乎没有效果。

目的是在屏幕上添加额外的控件（文本、“下一步”按钮等），但现在我对保留在一个地方的动画很满意。

我做错了什么？任何帮助表示赞赏！

代码：

@State private var isAnimating = false

var body: some View {
    VStack{
        Spacer()
        Image("FilmCircle")
            .resizable()
            .scaledToFit()
            .frame(width: 100, height: 100)
            .rotationEffect(Angle(degrees: isAnimating ? 360 : 0), anchor: .center)
            .animation(Animation.linear(duration: 2)
                .repeatForever(autoreverses: false))
            .onAppear {
                self.isAnimating = true
            }
            .background(Color.red)
        Spacer()
    }
}

Answer 1

在声明动画之前声明 .backgound(Color.red) 以便它也为背景设置动画。

关于使用导航视图时的问题，请参阅代码：-

    VStack{
    Spacer()
    Image("FilmCircle")
        .resizable()
        .scaledToFit()
        .background(Color.red)
        .frame(width: 100, height: 100)
        .rotationEffect(Angle(degrees: isAnimating ? 360 : 0), anchor: .center)
        .onAppear {
             DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                           withAnimation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                               isAnimating = true
                           }
                       }
        }
        Spacer()
    }

希望这对您有所帮助。

SwiftUI 旋转动画有意想不到的翻译

SwiftUI rotation animation has unexpected translation

ios

swiftui