一、SwiftUI 視圖創(chuàng)建

• 首先，創(chuàng)建一個新的 SwiftUI 視圖，為了舉例說明，在這個新視圖中，會展示一個有各種顏色的矩形列表，并把新視圖命名為 ColorList：

import SwiftUIstruct ColorList: View {var body: some View {Text("Hello, World!")} }struct ColorList_Previews: PreviewProvider {static var previews: some View {ColorList()} }

二、顏色

• 在視圖結(jié)構(gòu)的頂部，添加一個變量來記錄顏色：

var colors: [Color]

三、實現(xiàn)列表

• 在 body 變量的內(nèi)部，刪除掉占位 Text；在 ScrollView 嵌套中添加一個 HStack，如下：

var body: some View {ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .center, spacing: 50) {}} }

四、展示矩形

• 使用 ForEach 在 HStack 內(nèi)部根據(jù) colors 中的數(shù)據(jù)分別創(chuàng)建不同顏色的矩形。
• 此外，修改矩形的 frame，讓它看起來與傳統(tǒng) UI 布局更像一些：

var body: some View {ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .center, spacing: 20) {ForEach(colors, id: \.self) { color inRectangle().foregroundColor(color).frame(width: 200, height: 300, alignment: .center)}}} }

• 在 Preview 結(jié)構(gòu)體中傳入如下的顏色參數(shù)：

struct ColorList_Previews: PreviewProvider {static var previews: some View {ColorList(colors: [.blue, .green, .orange, .red, .gray, .pink, .yellow])} }

• 可以看到如下效果：

五、增加 3D 效果

• 首先，把 Rectangle 嵌套在 GeometryReader 中，這樣的話，當(dāng) Rectangle 在屏幕上移動的時候，就可以獲得其 frame 的引用：

var body: some View {ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .center, spacing: 230) {ForEach(colors, id: \.self) { color inGeometryReader { geometry inRectangle().foregroundColor(color).frame(width: 200, height: 300, alignment: .center)}}}} }

• 根據(jù) GeometryReader 的用法要求，需要修改上面定義的 HStack 的 spacing 屬性，在 Rectangle 中加入下面這行代碼：

.rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 210) / -20), axis: (x: 0, y: 1.0, z: 0))

• 當(dāng) Rectangle 在屏幕上移動時，這個方法的 Angle 參數(shù)會發(fā)生改變。請重點看 .frame(in:) 這個函數(shù)，可以獲取 Rectangle 的 CGRect 屬性 minX 變量來計算角度。
• axis 參數(shù)是一個元組類型，它定義了在使用傳入的角度參數(shù)時，哪一個坐標(biāo)軸要發(fā)生改變，在本例中是 Y 軸。
• rotation3DEffect(_:axis??anchorZ:perspective:) 說明：
• • 圍繞給定的旋轉(zhuǎn)軸在三維空間旋轉(zhuǎn)視圖，然后渲染輸出；

func rotation3DEffect(_ angle: Angle, axis: (x: CGFloat, y: CGFloat, z: CGFloat), anchor: UnitPoint = .center, anchorZ: CGFloat = 0, perspective: CGFloat = 1) -> some View

• • 參數(shù)說明：
• • • angle：旋轉(zhuǎn)視圖的角度；
• • • axis：指定旋轉(zhuǎn)軸的 x, y 和 z 元素；
• • • anchor：帶有默認(rèn)中心點的位置，它定義了 3D 空間中錨定旋轉(zhuǎn)的一個點；
• • • anchorZ：默認(rèn)值為 0 的位置，它定義了 3D 空間中錨定旋轉(zhuǎn)的一個點；
• • • perspective：相對消失點默認(rèn)為1。
• • 使用 rotation3deeffect (_:axis??anchorZ:perspective:) 將視圖圍繞給定的旋轉(zhuǎn)軸進行三維旋轉(zhuǎn)，并可選地將視圖定位于自定義的顯示順序和透視圖。如下所示，文本圍繞 y 軸旋轉(zhuǎn) 45?，最前面(默認(rèn) zIndex )和默認(rèn)透視圖(1)：

Text("Rotation by passing an angle in degrees").rotation3DEffect(.degrees(45), axis: (x: 0.0, y: 1.0, z: 0.0)).border(Color.gray)

• 運行程序，當(dāng)矩形在屏幕上移動時，可以看到它們在旋轉(zhuǎn)。修改矩形的 cornerRadius 屬性，加上投影效果，可以讓它更美觀：

六、最終示例

struct ColorList: View {var colors:[Color]var body: some View {ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .center, spacing: 230) {ForEach(colors, id: \.self) { color inGeometryReader { geometry inRectangle().foregroundColor(color).frame(width: 200, height: 300, alignment: .center).cornerRadius(16).shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 0).rotation3DEffect(Angle(degrees: (Double(geometry.frame(in: .global).minX) - 210) / -20), axis: (x: 0, y: 1.0, z: 0))}}}.padding(.horizontal, 210)}} }

總結(jié)

以上是生活随笔為你收集整理的SwiftUI之深入解析如何实现3D Scroll效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。