做过背单词App或者卡片式交互应用的开发者，大概率都被要求实现过“卡片翻转”效果：点击一张卡片，它沿着Y轴旋转180度，从正面翻到背面。这种效果在UIKit时代需要借助CATransform3D和透视矩阵，写起来相当繁琐，而SwiftUI把这件事简化成了一个修饰符——rotation3DEffect。不过真要做起来，你会发现从单张卡片翻转到书本式翻页，再到多方向3D折叠，每一步都有细节要处理。这篇文章就从原理到实现，完整讲一遍这套动画体系的做法。
一、理解rotation3DEffect与透视原理
要做出有立体感的翻转，首先得明白SwiftUI里3D旋转是怎么工作的。rotation3DEffect接收几个关键参数：角度、旋转轴、锚点和透视距离。其中透视距离（perspective参数）最容易被忽略，但它恰恰决定了翻转效果是“真3D”还是“纸片式扁平旋转”。
透视的原理其实很简单：人眼看远处的物体会变小，看近处的物体会变大。当卡片旋转时，远离视线的一侧应该缩小，靠近视线的一侧应该放大，这种近大远小的差异就是由透视距离控制的。SwiftUI中perspective的默认值比较小，透视感很强烈，翻转时卡片边缘会有明显的“膨胀”效果。如果你希望翻转看起来更平缓自然，可以适当增大这个值：
struct FlipCard: View {
@State private var isFlipped = false
var body: some View {
ZStack {
// 正面
frontView
.opacity(isFlipped ? 0 : 1)
// 背面
backView
.opacity(isFlipped ? 1 : 0)
}
.rotation3DEffect(
.degrees(isFlipped ? 180 : 0),
axis: (x: 0, y: 1, z: 0),
anchor: .center,
perspective: 0.8
)
.onTapGesture {
withAnimation(.easeInOut(duration: 0.6)) {
isFlipped.toggle()
}
}
}
}这里有个关键技巧：因为旋转是施加在包含正反两面的ZStack上，当角度超过90度时，背面内容需要提前切换显示，否则会看到镜像文字。上面的代码用opacity做条件切换，配合动画时机会在90度附近自动完成切换，这是最简洁的写法。如果用if-else切换视图再配合transition，控制粒度会更细，但代码量也更多。
另外要注意轴的选择：axis: (x: 0, y: 1, z: 0)表示绕Y轴旋转，也就是最常见的左右翻转；如果想做上下翻转，改成(x: 1, y: 0, z: 0)即可。轴的三个分量是归一化的，你也可以写(x: 1, y: 1, z: 0)做斜向翻转，效果会很特别。
二、封装可复用的Custom Flip Transition
系统自带的transition只有opacity、scale、slide等基础样式，翻转这种复合动画需要自己定义。SwiftUI的自定义转场核心是AnyTransition.modifier，把一个视图修饰符的初始态和结束态封装成转场：
extension AnyTransition {
static var flip: AnyTransition {
.modifier(
active: FlipModifier(angle: 90, opacity: 0),
identity: FlipModifier(angle: 0, opacity: 1)
)
}
}
struct FlipModifier: ViewModifier {
let angle: Double
let opacity: Double
func body(content: Content) -> some View {
content
.rotation3DEffect(
.degrees(angle),
axis: (x: 0, y: 1, z: 0),
anchor: .leading,
perspective: 1.0
)
.opacity(opacity)
}
}
// 使用方式
struct ContentView: View {
@State private var showDetail = false
var body: some View {
VStack {
if showDetail {
DetailView()
.transition(.flip)
} else {
CardListView()
.transition(.flip)
}
}
.onTapGesture {
withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
showDetail.toggle()
}
}
}
}这里把锚点设为.leading是有讲究的。卡片翻转用center没问题，但页面级转场用左边缘做锚点，看起来就像书页从左边翻起来，更符合阅读直觉。active态设成90度而不是180度，是因为视图在转场中离开屏幕时，超过90度的部分用户已经看不到了，转90度就够了，动画时间更短、体验更流畅。
封装成AnyTransition的好处是复用性极强，任何需要转场的地方都能直接.transition(.flip)一行搞定。你还可以进一步做成带参数的版本，比如支持指定方向、指定锚点，在参数里区分push和pop两种导航场景，让前进和后退的翻页方向相反，交互逻辑会更完整。
三、实现书本翻页与多页3D折叠效果
书本翻页比单卡翻转复杂的地方在于：翻页时有新旧两页同时存在，新页固定不动，旧页绕左边缘或右边缘旋转，并且翻过去的页面背后还要能看到下一页的内容。实现思路是把每一页拆成正面和背面两层，用ZStack叠加，翻页时让旧页的正面和背面作为一个整体绕边缘旋转：
struct BookPage: Identifiable {
let id: Int
let front: String
let back: String
}
struct BookView: View {
let pages: [BookPage]
@State private var currentPage = 0
@State private var isTurning = false
var body: some View {
ZStack {
// 底层：当前显示的下一页内容
if currentPage + 1 < pages.count {
Text(pages[currentPage + 1].front)
}
// 上层：正在翻动的页，正反两面
ZStack {
Text(pages[currentPage].front)
Text(pages[currentPage].back)
.rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
.opacity(isTurning ? 1 : 0)
}
.rotation3DEffect(
.degrees(isTurning ? -180 : 0),
axis: (x: 0, y: 1, z: 0),
anchor: .leading,
perspective: 0.5
)
}
.gesture(
DragGesture()
.onEnded { value in
if value.translation.width < -50, currentPage < pages.count - 1 {
withAnimation(.easeInOut(duration: 0.7)) {
isTurning = true
}
DispatchQueue.main.asyncAfter(deadline: .now() + 0.7) {
currentPage += 1
isTurning = false
}
}
}
)
}
}这段代码的核心是双层rotation3DEffect的嵌套：内层先把背面预先旋转180度，这样外层整体旋转时，背面在90度之后正好以正向姿态出现在视野里，避免了镜像问题。拖动手势判断左滑超过50点触发翻页，动画结束后更新页码并重置状态。注意这里用了DispatchQueue延迟，更好的做法是用动画完成回调（iOS 17之后可以用withAnimation的completion参数），避免时间硬编码。
如果要进一步做3D折叠效果，比如让卡片像折纸一样分两段折叠，可以给卡片的不同区块设置不同的旋转中心和旋转角度，前半段绕顶部锚点旋转，后半段保持不动，再配合shadow修饰符在折叠处添加阴影渐变，立体感会立刻出来。折叠类动画的关键是各区块的角度要连续，中间不能有跳变，建议把角度统一绑定到Gesture的进度值上，用插值的方式驱动，而不是依赖离散的状态切换。
四、常见问题与调优建议
第一个高频问题是背面镜像。很多人直接把背面视图放在正面视图上面，旋转后才发现文字全是反的。根源在于旋转是刚体变换，背面要预先反转一次才能在旋转后显示为正向，上面代码里内层的180度预旋转就是解决这个问题的。另一个思路是用scaleEffect(x: -1)做水平镜像，效果等价。
第二个问题是性能。rotation3DEffect本质上是GPU变换，单个卡片的开销可以忽略，但列表里几十张卡片同时做动画时，如果每张都带阴影和复杂视图层级，帧率就会掉。建议动画期间用drawingGroup()把卡片栅格化为Metal纹理渲染，能显著降低开销；阴影改用轻量的linearGradient模拟，比实时shadow计算便宜得多。
第三个问题是动画曲线的选择。翻页这类有物理感的动画，用spring比用easeInOut更自然，response控制在0.4到0.6之间，dampingFraction取0.75左右，会有一点点回弹但不夸张。如果是书本翻页，可以试试timingCurve自定曲线，前半段加速、后半段减速，模拟纸张被翻动时的惯性。
最后提一句可交互性：用手势驱动翻页时，把拖动距离实时映射到旋转角度，做跟手的半翻状态，松手后再决定是翻过去还是弹回来，这比纯点击触发的固定动画体验好很多。具体做法是在DragGesture的onChanged里更新一个CGFloat进度值，用进度乘以180度作为当前角度，松手时根据进度是否超过0.5来决定最终状态，配合spring动画自然收尾即可。