SwiftUI 如何实现矩形按钮点击平滑缩放过渡为圆形按钮效果

你当前通过正多边形模拟形状变化的方案确实冗余，使用系统原生组件即可实现更轻量的效果，核心逻辑是利用SwiftUI对cornerRadius属性的原生动画支持，天然可实现矩形到圆形的平滑过渡。

完整实现代码 #

import SwiftUI

struct TransformButtonView: View {
    @State private var started = false
    // 固定按钮高度，用于计算全圆角数值
    private let buttonHeight: CGFloat = 200
    
    var body: some View {
        Button {
            withAnimation(.easeOut(duration: 0.5)) {
                started.toggle()
            }
        } label: {
            ZStack {
                RoundedRectangle(cornerRadius: started ? buttonHeight/2 : 0)
                    .fill(started ? .green : .red)
                    .frame(width: 350, height: buttonHeight)
                    .scaleEffect(started ? 0.75 : 1.0)
                
                Text(started ? "Start" : "Stop")
                    .font(.system(size: 36, design: .rounded))
                    .fontWeight(.heavy)
            }
        }
        .padding()
    }
}

核心优化点 #

• 去掉自定义RegularPolygon依赖，用系统原生RoundedRectangle实现形状变化，通过cornerRadius参数控制形态：当圆角值等于高度的1/2时就会变成完全的圆形，过渡效果由系统原生动画驱动，性能和流畅度都更好
• 移除冗余的双层ZStack嵌套，单层ZStack即可承载背景和文字内容
• 改用原生Button组件实现交互，符合SwiftUI设计规范，自带系统级的点击交互适配
• 把动画包裹在状态切换逻辑中，比全局挂载动画的可控性更高，不会触发不必要的其他属性动画
• 形状、填充色、缩放的状态映射逻辑直接明了，没有多余的转换成本，后续修改状态参数也更方便

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