昨天刚好做了一个卡片翻转的效果，单独写出来做成一个示例。
3D翻转 其实就是一个关键修饰器 rotation3DEffect ，使用它来给视图添加3D立体的旋转动画效果。
rotation3DEffect 需要提供两个必须的参数：旋转角度 、 旋转轴
示例效果图
示例代码
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()
}
}
}
}
}