SwiftUI嵌套TabView后动画失效问题（WatchOS环境）

问题分析 #

在WatchOS项目中，独立视图的旋转动画可正常运行，但将视图嵌入TabView后动画停止工作。这是因为TabView的布局机制可能导致子视图的onAppear触发时机与动画系统的状态监听不匹配，原有的animation修饰符无法正确捕捉状态变化来启动动画。

解决方案 #

方案1：使用withAnimation显式启动动画

将状态修改包裹在withAnimation中，确保动画与状态变化强绑定，即使在TabView容器内也能正常触发：

struct DemoView: View {
    @State private var isAnimating = false
    
    var body: some View {
        TabView {
            Text("Hello")
                .rotationEffect(.degrees(isAnimating ? 360 : 0))
                .onAppear {
                    withAnimation(.smooth.repeatForever()) {
                        isAnimating = true
                    }
                }
        }
    }
}

方案2：将动画逻辑封装到子视图

把旋转文本的动画逻辑独立成子视图，让子视图自行管理动画状态，避免TabView的布局影响：

struct RotatingText: View {
    @State private var isAnimating = false
    
    var body: some View {
        Text("Hello")
            .rotationEffect(.degrees(isAnimating ? 360 : 0))
            .onAppear {
                withAnimation(.smooth.repeatForever()) {
                    isAnimating = true
                }
            }
    }
}

struct DemoView: View {
    var body: some View {
        TabView {
            RotatingText()
        }
    }
}

原理说明 #

WatchOS的TabView在初始化时，子视图的onAppear触发时机可能晚于视图布局完成，原有的animation(_:value:)修饰符依赖状态变化的value参数来启动动画，若状态变化时视图尚未完成布局，动画可能无法被正确注册。而withAnimation会直接将状态变化与动画绑定，强制动画系统执行动画序列，从而解决容器视图内的动画失效问题。

内容的提问来源于stack exchange，提问作者José Roberto Abreu