SwiftUI中如何实现视图从顶部向下展开的帧动画？

你遇到的动画卡顿且从中心展开的问题，根源在于默认视图对齐方式导致布局偏移。只需调整视图结构或对齐规则，就能实现顶部固定、向下展开的自然动画效果。

方案一：拆分固定栏与展开区域（推荐） #

将顶部标题栏和展开内容拆分，让标题栏始终固定，仅扩展下方内容区域，动画会完全向下展开：

@State private var isExpanded: Bool = false

VStack(alignment: .leading, spacing: 0) {
    // 固定顶部的标题栏
    HStack {
        Text("test")
        Spacer()
        Image(systemName: "chevron.left")
            .font(.custom("Helvetica Neue Medium", size: 16))
            .rotationEffect(Angle(degrees: isExpanded ? -90 : 0))
    }
    .padding()
    .background(Color.white)
    
    // 动态展开的内容区域
    Rectangle()
        .foregroundColor(.white)
        .frame(height: isExpanded ? 100 : 0) // 标题栏高度约80，展开后总高度80+100=180，和原需求一致
}
.onTapGesture {
    withAnimation(.spring()) {
        isExpanded.toggle()
    }
}
.frame(maxWidth: .infinity)

方案二：保留ZStack结构，修改对齐方式 #

如果想保留原ZStack布局，给.frame添加alignment: .top参数，让视图顶部固定，高度变化时仅向下扩展：

@State private var isExpanded: Bool = false

ZStack(alignment: .top) {
    Rectangle()
        .foregroundColor(.white)
    
    HStack {
        Text("test")
        Spacer()
        Image(systemName: "chevron.left")
            .font(.custom("Helvetica Neue Medium", size: 16))
            .rotationEffect(Angle(degrees: isExpanded ? -90 : 0))
    }
    .padding()
}
.onTapGesture {
    withAnimation(.spring()) {
        isExpanded.toggle()
    }
}
.frame(maxHeight: isExpanded ? 180 : 80, alignment: .top)

关键原理 #

原代码中ZStack默认居中对齐，当frame高度变化时，整个视图的中心位置会上下偏移，导致看起来像从中间展开。修改为顶部对齐或拆分固定区域后，视图顶部位置不变，高度增加仅体现在下方区域，动画自然变成向下展开的效果。

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