本文介紹了用SwiftUI實現3D Scroll效果的實現程式碼，分享給大家，具體如下：

我們預覽下今天要實現的 3D scroll 效果。學完本教程後，你就可以在你的 App 中把這種 3D 效果加入任何自定義的 SwiftUI 檢視。下面我們來開始本教程的學習。

入門

首先，建立一個新的 SwiftUI 檢視。為了舉例說明，在這個新檢視中，我會展示一個有各種顏色的矩形列表，並把新檢視命名為 ColorList 。

import SwiftUI

struct ColorList: View {
 var body: some View {
  Text("Hello,World!")
 }
}

struct ColorList_Previews: PreviewProvider {
 static var previews: some View {
  ColorList()
 }
}

顏色資料

在檢視的結構體裡，新增一個用於記錄顏色的變數。

var colors: [Color]

實現這個列表

在 body 變數的內部，刪除掉佔位 Text 。在 ScrollView 巢狀中新增一個 HStack ，如下：

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

  }
 }
}

展示矩形

我們使用 ForEach 在 HStack 內部根據 colors 中的資料分別建立不同顏色的矩形。此外，我修改了矩形的 frame，讓它看起來與傳統 UI 佈局更像一些。

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

在 Preview 結構體中傳入如下的顏色引數：

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

你可以看到下圖中的效果：

增加 3D 效果

首先，把 Rectangle 巢狀在 GeometryReader 中。這樣的話，當 Rectangle 在螢幕上移動的時候，我們就可以獲得其 frame 的引用。

var body: some View {
 ScrollView(.horizontal,spacing: 230) {
   ForEach(colors,id: \.self) { color in
    GeometryReader { geometry in
     Rectangle()
      .foregroundColor(color)
      .frame(width: 200,alignment: .center)
    }
   }
  }
 }
}

根據 GeometryReader 的用法要求，我們需要修改上面定義的 HStack 的 spacing 屬性。

在 Rectangle 中加入下面這行程式碼。

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

當 Rectangle 在螢幕上移動時，這個方法的 Angle 引數會發生改變。請重點看 .frame(in:) 這個函式，你可以獲取 Rectangle 的 CGRect 屬性 minX 變數來計算角度。

axis 引數是一個元組型別，它定義了在使用你傳入的角度引數時，哪一個座標軸要發生改變。在本例中，是 Y 軸。

rotation3DEffect() 方法的文件可以在蘋果官方網站的 這裡 找到。

下一步，把這個案例跑起來。當矩形在螢幕上移動時，你可以看到它們在旋轉。

我還修改了矩形的 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 in
     GeometryReader { geometry in
      Rectangle()
       .foregroundColor(color)
       .frame(width: 200,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),z: 0))
     }
    }
   }.padding(.horizontal,210)
  }
 }
}

結束

到此這篇關於用SwiftUI實現3D Scroll效果的實現程式碼的文章就介紹到這了,更多相關SwiftUI實現3D Scroll內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！