服务器之家

服务器之家 > 正文

用SwiftUI实现3D Scroll滚动效果的实现代码

时间:2021-01-15 16:22     来源/作者:CodingSuccess

本文介绍了用SwiftUI实现3D Scroll效果的实现代码,分享给大家,具体如下:

用SwiftUI实现3D Scroll滚动效果的实现代码

我们预览下今天要实现的 3D scroll 效果。学完本教程后,你就可以在你的 App 中把这种 3D 效果加入任何自定义的 SwiftUI 视图。下面我们来开始本教程的学习。

入门

首先,创建一个新的 SwiftUI 视图。为了举例说明,在这个新视图中,我会展示一个有各种颜色的矩形列表,并把新视图命名为 ColorList

?
1
2
3
4
5
6
7
8
9
10
11
12
13
import SwiftUI
 
struct ColorList: View {
 var body: some View {
  Text("Hello, World!")
 }
}
 
struct ColorList_Previews: PreviewProvider {
 static var previews: some View {
  ColorList()
 }
}

颜色数据

在视图的结构体里,添加一个用于记录颜色的变量。

?
1
var colors: [Color]

实现这个列表

body 变量的内部,删除掉占位 Text 。在 ScrollView 嵌套中添加一个 HStack ,如下:

?
1
2
3
4
5
6
7
var body: some View {
 ScrollView(.horizontal, showsIndicators: false) {
  HStack(alignment: .center, spacing: 50) {
 
  }
 }
}

展示矩形

我们使用 ForEachHStack 内部根据 colors 中的数据分别创建不同颜色的矩形。此外,我修改了矩形的 frame,让它看起来与传统 UI 布局更像一些。

?
1
2
3
4
5
6
7
8
9
10
11
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 结构体中传入如下的颜色参数:

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

你可以看到下图中的效果:

用SwiftUI实现3D Scroll滚动效果的实现代码

增加 3D 效果

首先,把 Rectangle 嵌套在 GeometryReader 中。这样的话,当 Rectangle 在屏幕上移动的时候,我们就可以获得其 frame 的引用。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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)
    }
   }
  }
 }
}

根据 GeometryReader 的用法要求,我们需要修改上面定义的 HStack 的 spacing 属性。

Rectangle 中加入下面这行代码。

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

Rectangle 在屏幕上移动时,这个方法的 Angle 参数会发生改变。请重点看 .frame(in:) 这个函数,你可以获取 RectangleCGRect 属性 minX 变量来计算角度。

axis 参数是一个元组类型,它定义了在使用你传入的角度参数时,哪一个坐标轴要发生改变。在本例中,是 Y 轴。

rotation3DEffect() 方法的文档可以在苹果官方网站的 这里 找到。

下一步,把这个案例跑起来。当矩形在屏幕上移动时,你可以看到它们在旋转。

我还修改了矩形的 cornerRadius 属性,并加上了投影效果,让它更美观。

用SwiftUI实现3D Scroll滚动效果的实现代码

最终效果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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)
  }
 }
}

结束

到此这篇关于用SwiftUI实现3D Scroll效果的实现代码的文章就介绍到这了,更多相关SwiftUI实现3D Scroll内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://juejin.im/post/5e9feb21e51d45470b4ff99b

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部