SwiftUI中ScrollView内动画/转场异常问题求助

我明白你遇到的困扰——ScrollView里的展开动画要么卡顿跳变，要么全局加动画后初始加载时整个列表会弹一下。下面给你一个完美的解决方案，既能保留流畅的展开/收起动画，又能消除初始加载时的不必要动画。

核心问题分析 #

• 直接给ScrollView加全局.animation()会让初始渲染时所有视图的布局变化都应用该动画，导致首次出现时的弹簧效果；
• 不加全局动画的话，ScrollView的布局更新（内容高度变化）不会和展开视图的转场动画同步，就会出现先跳变再动画的卡顿现象。

解决方案代码 #

我们需要局部控制动画作用域，只在用户点击触发状态变化时应用动画，同时确保初始加载时无动画：

首先修改你的ExpandingView，把动画精准绑定到状态变化上：

struct ExpandingView: View {
    @State var showContent = false
    
    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    // 仅在点击时触发弹簧动画，作用于所有相关状态变化
                    withAnimation(.spring()) {
                        showContent.toggle()
                    }
                }) {
                    // 给箭头图标添加旋转动画，让交互反馈更自然
                    Image(systemName: showContent ? "chevron.down.circle" : "chevron.right.circle")
                        .rotationEffect(.degrees(showContent ? 90 : 0))
                        .animation(.spring(), value: showContent)
                }
                Text("TITLE")
                    .padding(.leading, 10)
                Spacer()
            }
            // 展开内容的转场动画保持你原来的设置，会自动继承withAnimation的动画参数
            if showContent {
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat dapibus ante eget laoreet. Aenean lacus elit, auctor ut nisl id, fermentum pretium mi. Quisque lacus nisl, suscipit hendrerit est sed, congue dictum augue. Suspendisse semper viverra accumsan. Maecenas commodo turpis convallis nisl bibendum pharetra.")
                    .transition(AnyTransition.move(edge: .top).combined(with: .opacity))
            }
        }
        .padding()
    }
}

然后修改Test视图，用transaction确保初始加载时禁用动画：

struct Test: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
                ExpandingView()
                ExpandingView()
                ExpandingView()
                Text("Some static text")
            }
            .padding()
        }
        .transaction { transaction in
            // 只有当动画是由用户交互触发时（transaction.animation不为空），才保留动画
            // 初始加载时transaction.animation为nil，直接禁用动画
            transaction.animation = transaction.animation ?? nil
        }
    }
}

为什么这个方案有效 #

1. 局部动画绑定：withAnimation(.spring())只会作用于点击动作触发的showContent状态变化，包括展开内容的转场和箭头图标的旋转，动画同步且流畅；
2. 初始动画禁用：通过transaction拦截初始加载时的动画请求，确保ScrollView首次出现时没有任何不必要的动画；
3. ScrollView布局同步：当内容高度变化时，ScrollView的布局更新会自动参与到withAnimation的动画中，避免跳变卡顿。

你可以直接复制这段代码替换原来的实现，就能得到你想要的效果啦！

内容的提问来源于stack exchange，提问作者Tamás Horváth