SwiftUI实现锚定前表面底边的立方体双表面旋转效果问题

问题场景 #

不需要完整实现立方体，仅需两个视图分别作为前表面（红色）和顶表面（橙色），实现锚定在前表面底边向用户旋转的效果。遇到以下问题：

• 初始代码通过滑块驱动角度变化，但内外旋转组合导致顶表面形状失真
• 尝试独立旋转视图无法保持边缘匹配与连接
• 使用matchedGeometryEffect实现了视图连接与独立旋转，但需借助魔法数字0.32调整顶表面尺寸，不同角度下仍存在尺寸偏差

初始代码 #

struct TestView: View {
    @State private var value: Double = 0

    var angle: Double {
        10 + 75 * value
    }

    var body: some View {
        VStack(spacing: 0) {
            Color.orange
                .frame(width: 200, height: 200)
                .rotation3DEffect(
                    .degrees(-angle + 90 ),
                    axis: (x: 1.0, y: 0.0, z: 0.0),
                    anchor: .bottom,
                    perspective: 0.3
                )
            
            Color.red
                .frame(width: 200, height: 200)
        }
        .rotation3DEffect(
            .degrees(-angle),
            axis: (x: 1.0, y: 0.0, z: 0.0),
            anchor: .bottom,
            perspective: 0.3
        )
        
        Slider(value: $value, in: 0.0...1.0, step: 0.1)
            .padding()
    }
}

优化后代码（含魔法数字） #

struct TestView: View {
    @State private var value: Double = 0
    @Namespace private var cubeNS
    
    var degrees: Double {
        value * 90
    }
    
    var radians: Double {
        value * (Double.pi / 2)
    }
    
    var body: some View {
        Group {
            Color.orange
                .frame(width: 200, height: 200)
                .rotation3DEffect(
                    .degrees(-degrees + 90 ),
                    axis: (x: 1.0, y: 0.0, z: 0.0),
                    anchor: .bottom,
                    perspective: 0.25
                )
                .matchedGeometryEffect(id: "cube", in: cubeNS, properties: .position, anchor: .bottom, isSource: false)
                .scaleEffect(1 + sin(radians) * 0.32) // <-- 🤔依赖魔法数字
            
            Color.red
                .frame(width: 200, height: 200)
                .matchedGeometryEffect(id: "cube", in: cubeNS, properties: .position, anchor: .top, isSource: true)
                .rotation3DEffect(
                    .degrees(-degrees),
                    axis: (x: 1.0, y: 0.0, z: 0.0),
                    anchor: .bottom,
                    perspective: 0.25
                )
        }
        Slider(value: $value, in: 0.0...0.95, step: 0.05)
            .padding()
    }
}

解决方案：基于透视投影的精确尺寸计算 #

问题根源是matchedGeometryEffect仅同步位置，但3D旋转后的透视缩放需要精确计算，不能依赖魔法数字。通过透视投影的数学公式推导顶表面的缩放比例，可实现全角度下的精准边缘匹配。

修改后的完整代码 #

struct TestView: View {
    @State private var value: Double = 0
    @Namespace private var cubeNS
    
    // 旋转角度范围：0°到90°
    var degrees: Double {
        value * 90
    }
    
    // 转换为弧度用于三角函数计算
    var radians: Double {
        degrees * .pi / 180
    }
    
    // 统一透视参数，与旋转效果保持一致
    private let perspective: CGFloat = 0.25
    
    // 精确计算顶表面的缩放比例，适配透视效果
    var topScale: CGFloat {
        let angleRadians = CGFloat(radians)
        // 透视投影缩放公式：抵消旋转带来的视觉拉伸
        return 1 / (1 + perspective * sin(angleRadians))
    }
    
    var body: some View {
        Group {
            Color.orange
                .frame(width: 200, height: 200)
                .rotation3DEffect(
                    .degrees(-degrees + 90),
                    axis: (x: 1.0, y: 0.0, z: 0.0),
                    anchor: .bottom,
                    perspective: perspective
                )
                .matchedGeometryEffect(id: "cube", in: cubeNS, properties: .position, anchor: .bottom, isSource: false)
                .scaleEffect(topScale) // 替换魔法数字，使用精确计算值
            
            Color.red
                .frame(width: 200, height: 200)
                .matchedGeometryEffect(id: "cube", in: cubeNS, properties: .position, anchor: .top, isSource: true)
                .rotation3DEffect(
                    .degrees(-degrees),
                    axis: (x: 1.0, y: 0.0, z: 0.0),
                    anchor: .bottom,
                    perspective: perspective
                )
        }
        Slider(value: $value, in: 0.0...1.0, step: 0.05)
            .padding()
    }
}

关键改进点 #

1. 透视参数统一：将透视值提取为常量，确保旋转和缩放计算使用相同参数，避免视觉偏差
2. 精确缩放计算：利用公式1 / (1 + perspective * sin(angle))模拟3D透视缩放，完美匹配顶表面旋转后的视觉尺寸
3. 移除魔法数字：通过数学计算替代硬编码数值，确保0°到90°全旋转范围边缘精准对齐
4. 恢复完整旋转范围：滑块范围回到0.0...1.0，支持完整的90°旋转过程

内容的提问来源于stack exchange，提问作者Germán