SwiftUI中如何实现ImageView短暂放大后恢复原尺寸的缩放动画？

要实现图片短暂放大再恢复原尺寸的效果，核心是通过状态变量控制缩放比例，结合延迟任务触发恢复动作，再配合SwiftUI的动画系统完成过渡。以下是完整的实现方案：

步骤1：定义状态变量 #

在View结构体中添加用于控制缩放比例的@State变量：

@State private var scale: CGFloat = 1.0
// 如果你的场景是通过评分选择触发（对应你代码里的selectedRating），保留这个变量
@State private var selectedRating: Int = 0

步骤2：添加动画触发逻辑 #

通过手势或状态变化事件触发缩放动画，这里把重复逻辑提取成方法，方便复用：

private func triggerScaleAnimation() {
    // 先将图片放大到目标比例（比如1.5倍，可按需调整）
    scale = 1.5
    // 延迟动画时长后恢复原尺寸
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
        scale = 1.0
    }
}

步骤3：绑定动画到图片视图 #

将缩放效果和动画绑定到图片上，同时添加触发条件：

var body: some View {
    Image("disagreeSmall")
        .scaleEffect(scale)
        // 绑定动画到scale变量的变化，设置过渡曲线和时长
        .animation(.easeInOut(duration: 0.15), value: scale)
        // 方式1：点击图片时触发动画
        .onTapGesture {
            triggerScaleAnimation()
        }
        // 方式2：当selectedRating变化时触发动画（对应你原代码的场景）
        .onChange(of: selectedRating) { _ in
            triggerScaleAnimation()
        }
}

关键说明 #

• 动画曲线：使用.easeInOut让缩放的开始和结束都更平滑，也可根据需求换成.easeIn（快速放大，缓慢恢复）或.easeOut（缓慢放大，快速恢复）
• 放大倍数：1.5倍是比较自然的反馈，你可以调整为1.2、1.3等数值适配UI风格
• 延迟时间：设置和动画时长一致（0.15秒），确保放大动画完成后立刻开始恢复过渡，避免视觉断层

完整代码示例 #

struct ImageScaleAnimationView: View {
    @State private var scale: CGFloat = 1.0
    @State private var selectedRating: Int = 0
    
    var body: some View {
        Image("disagreeSmall")
            .scaleEffect(scale)
            .animation(.easeInOut(duration: 0.15), value: scale)
            .onTapGesture {
                triggerScaleAnimation()
            }
            .onChange(of: selectedRating) { _ in
                triggerScaleAnimation()
            }
    }
    
    private func triggerScaleAnimation() {
        scale = 1.5
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
            scale = 1.0
        }
    }
}

内容的提问来源于stack exchange，提问作者PK-V