用SwiftUI實(shí)現(xiàn)3D Scroll滾動(dòng)效果的實(shí)現(xiàn)代碼

更新時(shí)間：2020年04月27日 17:01:49 作者：CodingSuccess

這篇文章主要介紹了用SwiftUI實(shí)現(xiàn)3D Scroll效果的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)

本文介紹了用SwiftUI實(shí)現(xiàn)3D Scroll效果的實(shí)現(xiàn)代碼，分享給大家，具體如下：

我們預(yù)覽下今天要實(shí)現(xiàn)的 3D scroll 效果。學(xué)完本教程后，你就可以在你的 App 中把這種 3D 效果加入任何自定義的 SwiftUI 視圖。下面我們來(lái)開(kāi)始本教程的學(xué)習(xí)。

入門(mén)

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

import SwiftUI

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

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

顏色數(shù)據(jù)

在視圖的結(jié)構(gòu)體里，添加一個(gè)用于記錄顏色的變量。

var colors: [Color]

實(shí)現(xiàn)這個(gè)列表

在 body 變量的內(nèi)部，刪除掉占位 Text 。在 ScrollView 嵌套中添加一個(gè) 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，讓它看起來(lái)與傳統(tǒng) UI 布局更像一些。

var body: some View {
 ScrollView(.horizontal, showsIndicators: false) {
  HStack(alignment: .center, spacing: 20) {
   ForEach(colors, id: \.self) { color in
    Rectangle()
     .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 中。這樣的話(huà)，當(dāng) Rectangle 在屏幕上移動(dòng)的時(shí)候，我們就可以獲得其 frame 的引用。

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, 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 在屏幕上移動(dòng)時(shí)，這個(gè)方法的 Angle 參數(shù)會(huì)發(fā)生改變。請(qǐng)重點(diǎn)看 .frame(in:) 這個(gè)函數(shù)，你可以獲取 Rectangle 的 CGRect 屬性 minX 變量來(lái)計(jì)算角度。

axis 參數(shù)是一個(gè)元組類(lèi)型，它定義了在使用你傳入的角度參數(shù)時(shí)，哪一個(gè)坐標(biāo)軸要發(fā)生改變。在本例中，是 Y 軸。

rotation3DEffect() 方法的文檔可以在蘋(píng)果官方網(wǎng)站的這里找到。

下一步，把這個(gè)案例跑起來(lái)。當(dāng)矩形在屏幕上移動(dòng)時(shí)，你可以看到它們?cè)谛D(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 in
     GeometryReader { geometry in
      Rectangle()
       .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é)束

到此這篇關(guān)于用SwiftUI實(shí)現(xiàn)3D Scroll效果的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)SwiftUI實(shí)現(xiàn)3D Scroll內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: