如何修复SwiftUI中设备旋转后矩形无法固定位置、随机飘移的问题

当前代码未给动画绑定指定触发的响应值，导致包括横竖屏切换时的布局变化在内的所有视图属性变更，都会被这个无限动画捕获，就会出现矩形位置漂移的异常效果。

• 给animation修饰符指定value参数，仅让动画响应isAnimating状态的变化，布局变化时不会触发该动画
• 若需兼容更低系统版本，可替换为显式动画触发逻辑，兼容性更好

修正后完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var isAnimating = false
    var animation: Animation {
        Animation.linear(duration: 1)
            .repeatForever(autoreverses: false)
    }
    
    var body: some View {
        HStack {
            Text("Hello, world!")
                .padding()
            Spacer()
            Rectangle()
                .frame(width: 20, height: 20)
                .foregroundColor(.red)
                .rotationEffect(Angle.degrees(isAnimating ? 360 : 0))
                // 仅响应isAnimating的变更触发动画
                .animation(animation, value: isAnimating)
                .onAppear {
                    isAnimating = true
                }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

低版本兼容写法 #

如果需要适配iOS 15以下的系统，可改为显式动画触发，删除原有animation修饰符即可：

.onAppear {
    withAnimation(animation) {
        isAnimating = true
    }
}

内容的提问来源于stack exchange，提问作者Degtiarev Aleksei