用SwiftUI实现3D Scroll滚动效果的实现代码
本文介绍了用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, showsIndicators: false) {
HStack(alignment: .center, 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, 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 中加入下面这行代码。
.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, 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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于升级到Swift 4.0可能遇到的坑的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用swift4具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
Swift高阶函数contains allSatisfy reversed lexicographicallyPr
这篇文章主要为大家介绍了Swift高阶函数contains allSatisfy reversed lexicographicallyPrecedes用法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
区别于 C 语言，在 Swift 中你可以对浮点数进行取余运算（%），Swift 还提供了 C 语言没有的表达两数之间的值的区间运算符，（a..b和a...b），这方便我们表达一个区间内的数值。2015-04-04
这篇文章主要介绍了Swift语言中的类与结构体,是Swift入门学习中的基础知识,需要的朋友可以参考下2015-11-11
快速排序是一种不稳定的排序,存在着优化空间,这里我们来看快速排序算法在Swift编程中的几种代码实现示例:2016-07-07
本篇文章主要介绍了在swift中实现NSCoding的自动归档和解档，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
协议规定了用来实现某一特定功能所必需的方法和属性。任意能够满足协议要求的类型被称为遵循(conform)这个协议。类，结构体或枚举类型都可以遵循协议，并提供具体实现来完成协议定义的方法和功能2022-08-08
缓存就是一个存储器,常用 Redis作为缓存数据库,本文主要介绍了SpringBoot3.0集成Redis缓存的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
这篇文章主要介绍了Swift 如何让ScrollView滚动到具体某个位置,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
很多人想学习iOS开发，但是不知道如何从Objective-C和Swift之间选择。而网上的一些答案，大抵说的是，以后Swift终将取代Objective-C，但是目前来讲还是Objective-C比较重要。那么究竟怎样呢，今天我们就来探讨下2016-12-12
最新评论