SwiftUI中按钮触发图片旋转动画失效问题求助

问题原因 #

你的Button使用默认的action回调，只会在**点击完成（按下并释放）**时触发一次isPressed.toggle()，这和pressEvents修饰符的逻辑不匹配：

• pressEvents是按下时触发onPress（设置isPressed = true），释放时触发onRelease（设置isPressed = false），完整模拟了"按下-释放"的交互流程
• 而Button的action仅在点击结束后执行一次，导致isPressed被切换为true后没有触发复原逻辑，同时toggle操作未包裹动画，所以看不到过渡效果

修改后的代码 #

只需要修改ContentView中Button的部分，给它也应用pressEvents修饰符即可：

struct ContentView: View {
    
    @State private var isPressed = false
    
    var body: some View {
        ZStack{
            HStack{
                Spacer()
                Image("stick")
                    .frame(width: 50, height: 600)
                    .border(Color.blue, width: 4)
                    .padding(15)
                    .rotationEffect(isPressed ?
                                    Angle(degrees:-30):Angle(degrees: 0),
                                    anchor: .bottomTrailing)
                    .pressEvents {
                        // On press
                        withAnimation(.easeInOut(duration: 0.1)) {
                            isPressed = true
                        }
                    } onRelease: {
                        withAnimation {
                            isPressed = false
                        }
                    }
            }
            HStack{
                Spacer()
                Button {
                    // 这里不再需要toggle，因为pressEvents会处理状态
                } label: {
                    Rectangle()
                        .frame(width: 100, height: 700, alignment: .leading)
                        .foregroundColor(.clear)
                        .border(Color.blue, width: 4)
                        .padding(5)
                }
                // 给Button添加pressEvents，复用和图片一样的逻辑
                .pressEvents {
                    withAnimation(.easeInOut(duration: 0.1)) {
                        isPressed = true
                    }
                } onRelease: {
                    withAnimation {
                        isPressed = false
                    }
                }
            }
        }
    }
}

关键修改说明 #

• 移除Button的action中的toggle操作，因为我们通过pressEvents来控制isPressed的状态变化
• 给Button添加pressEvents修饰符，让它和图片遵循完全相同的交互逻辑：按下时触发旋转动画，释放时触发复位动画
• 这样Button的"按下-释放"交互就会和图片的手势交互效果完全一致

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