SwiftUI按钮光环动画实现：如何实现触摸时出现光环且按钮轻微收缩的效果？

嘿，这个按压动画效果其实用SwiftUI的状态变量和基础动画就能轻松实现，我给你拆解一下思路，再附上完整可运行的代码：

核心思路 #

我们需要实现两个关键交互效果：

• 按压时按钮轻微收缩：用scaleEffect结合状态变量模拟按压的重量感
• 按压时周围出现光环：通过叠加的圆形边框，动态调整透明度、线宽和缩放来实现扩散效果

完整代码（iOS 15+） #

struct ContentView: View {
    // 跟踪按钮是否被按压的状态变量
    @State private var isPressed = false
    
    var body: some View {
        Button(action: { }, label: {
            Image(systemName: "camera")
                .font(.title)
        })
        .padding(.horizontal, 20)
        .frame(height: 80)
        .background(
            ZStack {
                // 原有的基础圆形背景
                Color.yellow.opacity(0.2)
                    .clipShape(Circle())
                // 按压时触发的光环效果
                Circle()
                    .stroke(Color.yellow.opacity(isPressed ? 0.6 : 0), lineWidth: isPressed ? 4 : 0)
                    .scaleEffect(isPressed ? 1.2 : 1)
            }
        )
        // 按钮收缩动画
        .scaleEffect(isPressed ? 0.95 : 1)
        // 捕捉按压/释放事件（iOS 15+专属API）
        .onPress {
            isPressed = true
        }
        .onRelease {
            isPressed = false
        }
        // 统一动画参数，让效果更流畅协调
        .animation(.easeInOut(duration: 0.2), value: isPressed)
    }
}

关键细节解释 #

• 状态同步：@State private var isPressed是整个动画的核心，所有和按压相关的UI变化都通过这个变量同步触发
• 按压事件捕捉：iOS 15+提供的onPress和onRelease修饰符，能精准捕捉手指按压和释放的时机，比手势写法更简洁直观
• 收缩效果：scaleEffect(isPressed ? 0.95 : 1)让按钮在按压时缩小到原尺寸的95%，模拟真实按钮被按压的物理反馈
• 光环效果：叠加的Circle边框平时完全隐藏（透明度0、线宽0），按压时显示半透明黄色边框并放大到1.2倍，营造出向外扩散的光环感
• 动画统一：.animation(.easeInOut(duration: 0.2), value: isPressed)让所有关联动画使用相同的缓动曲线和时长，避免出现动画脱节的情况

兼容iOS 14及以下版本 #

如果需要支持更低版本的iOS，可以用DragGesture替代onPress和onRelease，把对应的修饰符替换成这段代码：

.gesture(
    DragGesture(minimumDistance: 0)
        .onChanged { _ in
            isPressed = true
        }
        .onEnded { _ in
            isPressed = false
        }
)

这样修改后，按钮就能完美实现你想要的按压收缩+光环扩散的动画效果啦～

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