SwiftUI 卡片3D翻转效果示例

struct ContentView: View {
    
    @State var isFlipped = false
    var body: some View {
        VStack {
            ZStack {
                // 卡片正面视图
                CardView(backDegrees: 0, frontDegress: -90, isFlipped: $isFlipped, imgName: "front")
                    // 应用 3D 旋转效果
                    .rotation3DEffect(
                        .degrees(isFlipped ? 0 : -90), axis: (x: 0.0, y: 1.0, z: 0.0)
                    )
                    // 根据翻转状态添加动画效果，翻转时无延迟，未翻转时延迟 0.35 秒
                    .animation(isFlipped ? .linear.delay(0.35) : .linear, value: isFlipped)
                // 卡片背面视图
                CardView(backDegrees: 90, frontDegress: 0, isFlipped: $isFlipped, imgName: "back")
                    .rotation3DEffect(
                        .degrees(isFlipped ? 90 : 0), axis: (x: 0.0, y: 1.0, z: 0.0)
                    )
                    .animation(isFlipped ? .linear : .linear.delay(0.35), value: isFlipped)
            }
            // 点击时触发翻转动画
            .onTapGesture {
                withAnimation(.easeIn) {
                    isFlipped.toggle()
                }
            }
        }
    }
}