SwiftUI中动画延迟为何导致动画与视图布局不同步？

问题现象 #

在SwiftUI的HStack上应用带.delay()的动画时，会出现动画与视图布局不同步的问题：

• 移除.delay()修饰符后，动画与布局完全同步；
• 动画完全结束后切换showView状态，功能正常；
• 但在延迟动画接近完成时切换showView，会出现布局和动画错位，直到当前延迟动画彻底结束才恢复正常。

复现代码 #

// ContentView.swift
import SwiftUI

struct ContentView: View {
    @State private var showView = true
    var body: some View {
        VStack(spacing: 50) {
            HStack {
                Image(systemName: "globe")
                if showView {
                    Text("Hello, world!")
                }
            }
            .animation(.default.delay(1), value: showView) // 此处的delay引发问题
            
            Button("Toggle Text") {
                showView.toggle()
            }
        }
    }
}

#Preview {
    ContentView()
}

该问题出现于iOS 17.2（模拟器）、iOS 17.3.1（真机）及Xcode 15.2版本。

解决方案 #

核心问题在于.animation修饰符会给视图的所有可动画属性变化绑定动画，当延迟动画未完成时触发新的状态切换，新旧动画会叠加导致布局计算混乱。改用withAnimation包裹状态切换操作，能精准控制单次状态变化的动画，避免冲突：

修改后的代码：

// ContentView.swift
import SwiftUI

struct ContentView: View {
    @State private var showView = true
    var body: some View {
        VStack(spacing: 50) {
            HStack {
                Image(systemName: "globe")
                if showView {
                    Text("Hello, world!")
                }
            }
            // 移除视图上的.animation修饰符
            
            Button("Toggle Text") {
                // 使用withAnimation包裹状态切换，指定延迟动画
                withAnimation(.default.delay(1)) {
                    showView.toggle()
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

原理说明 #

withAnimation是针对状态变化的动画触发方式，每次调用时会将状态变更包裹在指定动画中，并且默认会取消当前正在进行的同属性动画，确保新的动画和布局同步执行，从根源上避免了延迟动画叠加导致的布局错位问题。

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