SwiftUI侧边栏菜单动画异常：未执行移动而是渐隐

问题概述 #

实现自定义侧边栏菜单时，设置了2秒的菜单移出动画，但点击按钮后，按钮选中状态的变化动画远快于菜单移出速度；即使将Button替换为Text+onTapGesture，仍存在不协调的渐隐动画问题。

问题根源 #

1. 原代码仅给menuState.menuOffset绑定了全局隐式动画，但currentFeature的更新触发的按钮选中状态变化，使用的是SwiftUI默认的短时长隐式动画，导致两者动画节奏不一致。
2. 即使替换成Text组件，selected属性依赖currentFeature，其变化触发的视图更新未与菜单偏移动画共享同一上下文，因此仍会出现动画不协调的情况。

解决方案 #

使用显式动画，在修改状态的闭包中用withAnimation包裹所有状态变更操作，确保currentFeature和menuOffset的变化都应用同一个动画参数，替代全局隐式动画，避免动画上下文冲突。

修改后完整代码 #

class MenuState: ObservableObject {
    @Published var currentFeature: Feature = .featureA
    @Published var menuOffset: CGFloat = 0
}

enum Feature: String, CaseIterable {
    case featureA = "Feature A"
    case featureB = "Feature B"
    case featureC = "Feature C"
}

extension Feature: Identifiable {
    var id: RawValue { rawValue }
}

struct ContentView: View {
    @StateObject var menuState = MenuState()

    var body: some View {
        ZStack(alignment: .leading) {
            content
            menu
        }
        .environmentObject(menuState)
        // 移除全局绑定的动画，改用显式动画控制
    }

    var menu: some View {
        VStack {
            ForEach(Feature.allCases) { feature in
                FeatureButton(feature: feature)
            }
        }
        .frame(maxHeight: .infinity)
        .frame(width: 200)
        .background(.thinMaterial)
        .offset(x: menuState.menuOffset)
    }

    var content: some View {
        VStack {
            Button("Show Menu") {
                withAnimation(.easeOut(duration: 2.0)) {
                    menuState.menuOffset = 0
                }
            }
            Text(menuState.currentFeature.rawValue)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

struct FeatureButton: View {
    @EnvironmentObject var menuState: MenuState

    let feature: Feature
    var selected: Bool {
        return menuState.currentFeature == feature
    }

    var body: some View {
        Button(feature.rawValue) {
            // 用显式动画包裹所有状态变更，保证动画同步
            withAnimation(.easeOut(duration: 2.0)) {
                menuState.currentFeature = feature
                menuState.menuOffset = -200
            }
        }
        .buttonStyle(FeatureButtonStyle(selected: selected))
    }
}

struct FeatureButtonStyle: ButtonStyle {
    var selected: Bool // 移除不必要的MenuState依赖，仅保留所需参数
    public func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(maxWidth: .infinity, minHeight: 44)
            .foregroundColor(selected ? .blue : .primary)
            .background(Color.gray.opacity(selected ? 0.4 : 0))
            .contentShape(Rectangle())
    }
}

额外优化点 #

• 移除了FeatureButtonStyle中的@EnvironmentObject依赖，仅通过selected参数传递状态，减少不必要的环境耦合，让组件更独立。
• 菜单移入操作也使用了相同的显式动画，保证菜单移入/移出的动画一致性。

效果说明 #

修改后，按钮的选中状态变化（文字颜色、背景透明度）会和菜单的移出动画保持2秒的同步节奏，不会出现按钮状态提前完成变化的情况，整体动画效果统一协调。

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