SwiftUI 使用rotation3DEffect() 修饰符在3D空间中旋转视图的代码演示

17 min read

这里提供一个简单的 SwiftUI 代码演示,使用 rotation3DEffect() 修饰符在3D空间中旋转一个视图:

struct ContentView: View {
    @State var angle: Double = 0.0
    
    var body: some View {
        VStack {
            Text("Hello, 3D World!")
                .foregroundColor(.white)
                .font(.largeTitle)
                .padding()
                .background(Color.blue)
                .cornerRadius(10.0)
                .rotation3DEffect(.degrees(angle), axis: (x: 0.0, y: 1.0, z: 0.0))
                .animation(.easeInOut(duration: 1.0))
            
            Slider(value: $angle, in: 0...360, step: 1)
                .padding()
            
        }
    }
}

这个示例代码中,我们首先定义了一个名为 ContentView 的 SwiftUI 视图,它包含一个带有动态角度旋转的文本标签和一个滑块。文本标签使用三维效果旋转,其中 rotation3DEffect() 修饰符使其在 x、y 或 z 轴上旋转。

在这里,我们使用了 axis 参数指定旋转轴,并结合使用一个带有动画效果的 Slider 让用户可以控制旋转角度。

我们可以在 preview 中渲染此视图:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

当你运行应用程序并使用滑块更改角度时,你会看到文本标签在3D空间中旋转。

这只是 SwiftUI 中使用 rotation3DEffect() 修饰符旋转一个视图的基础知识,实际上,可以使用这个修饰符来制作有趣的3D效果,如翻牌动画、卡片效果和立方体旋转等。