如何在SwiftUI中实现点击触发的图片切换动画效果

要实现点击图片切换并添加翻转动画，核心是用状态驱动视图更新——SwiftUI是声明式框架，状态变化会自动触发视图重绘，结合动画修饰器就能实现你要的效果，无需直接修改Image实例。

完整实现代码 #

struct AdapterView: View {
    // 状态变量：控制当前显示的图片、翻转状态、原有旋转角度和点击次数
    @State private var currentImage: ImageResource = .austrianPassi
    @State private var isFlipped = false
    @State private var numberOfTaps = 0
    @State private var austrianRotationAngle = 0.0
    
    // 替换成你要切换的另一张图片资源
    private let targetImage: ImageResource = .anotherAdapter

    var body: some View {
        Image(currentImage)
            .resizable()
            .frame(width: 100, height: 100)
            // 3D翻转效果：绕Y轴旋转180度，配合状态切换触发动画
            .rotation3DEffect(
                .degrees(isFlipped ? 180 : 0),
                axis: (x: 0, y: 1, z: 0)
            )
            // 绑定动画到翻转状态，确保状态变化时自动播放过渡动画
            .animation(.easeInOut(duration: 0.6), value: isFlipped)
            .onTapGesture {
                numberOfTaps += 1
                austrianRotationAngle += 90
                
                // 触发翻转动画
                withAnimation {
                    isFlipped.toggle()
                }
                
                // 延迟0.3秒（动画时长的一半）切换图片，模拟翻牌时的图片切换时机
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                    currentImage = currentImage == .austrianPassi ? targetImage : .austrianPassi
                }
                
                // 保留你原有的调试打印
                let plugType = "Type F"
                debugPrint("hi, I have been pressed" + "I am an Austrian Adapter " + "🚀")
                debugPrint("I am a " + plugType + " plug")
                debugPrint(austrianRotationAngle)
            }
    }
}

关键逻辑说明 #

1. 状态变量控制图片源：
   用@State private var currentImage存储当前显示的图片资源，点击时切换它的值，SwiftUI会自动更新Image视图的内容。

2. 3D翻转动画实现：
   使用rotation3DEffect实现立体翻转效果，通过isFlipped状态控制旋转角度（0度/180度），并绑定animation修饰器让状态变化时自动播放过渡动画。

3. 图片切换时机调整：
   用DispatchQueue.main.asyncAfter延迟切换图片，让翻转到一半时完成图片替换，更符合真实翻牌的视觉体验。如果想要同步切换，直接把图片切换代码放到withAnimation块里即可。

4. 保留原有旋转逻辑：
   你原有的austrianRotationAngle累加逻辑可以保留，若不需要平面旋转，直接移除相关代码即可。

注意事项 #

• 确保你的两张图片都已添加到Assets中，并且资源名称和代码中的.austrianPassi、.anotherAdapter一致。
• 可以调整animation的duration参数来控制翻转动画的快慢，比如改成0.5会更快。

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