脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Swift → SwiftUI实现3D Scroll

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

 更新时间：2020年04月27日 17:01:49   作者：CodingSuccess  
这篇文章主要介绍了用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编程中实现希尔排序算法的代码实例

    Swift编程中实现希尔排序算法的代码实例

    希尔排序是对插入排序的一种改进版本,算法本身并不稳定,存在优化空间,这里我们来讲一下希尔排序的大体思路及Swift编程中实现希尔排序算法的代码实例
    2016-07-07
  • iOS开发中Swift 指纹验证功能模块实例代码

    iOS开发中Swift 指纹验证功能模块实例代码

    本文给大家分享ios调用touchid代码块，非常不错，具有参考借鉴价值，需要的朋友参考下把
    2017-03-03
  • 解析Swift语言面相对象编程中的继承特性

    解析Swift语言面相对象编程中的继承特性

    这篇文章主要介绍了解析Swift语言面相对象编程中的继承特性,是Swift入门学习中的基础知识,需要的朋友可以参考下
    2015-11-11
  • 详解Swift 中的幻象类型

    详解Swift 中的幻象类型

    让我们来看看一种技术，它可以让我们利用 Swift 的类型系统在编译时执行更多种类的数据验证消除更多潜在的歧义来源，并帮助我们在整个代码库中保持类型安全，通过使用幻象类型(phantom types)，对Swift 幻象类型相关知识感兴趣的朋友一起看看吧
    2022-05-05
  • Swift UIButton使用教程

    Swift UIButton使用教程

    这篇文章主要介绍了Swift UIButton的使用方法，帮助大家更好的理解和学习swift编程，感兴趣的朋友可以了解下
    2020-09-09
  • swift指针及内存管理内存绑定实例详解

    swift指针及内存管理内存绑定实例详解

    这篇文章主要为大家介绍了swift指针及内存管理内存绑定实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

    Swift操作Quartz 2D进行简单的绘图与坐标变换的教程

    这篇文章主要介绍了Swift操作Quartz 2D进行简单的绘图与坐标变换的教程,Quartz 2D是Core Graphics框架中的一个重要组件,经常被Mac OS或和iOS开发者用来绘图,需要的朋友可以参考下
    2016-04-04
  • swift中AnyObject和Any的介绍与区别详解

    swift中AnyObject和Any的介绍与区别详解

    虽然使用swift开发了一段时间，但是感觉对一些基础的东西了解不是比较透彻，在查询了许多资料以后还是打算自己动手记录一下，下面这篇文章主要给大家介绍了关于swift中AnyObject和Any的介绍与区别的相关资料，需要的朋友可以参考下。
    2017-12-12
  • Swift使用CollectionView实现广告栏滑动效果

    Swift使用CollectionView实现广告栏滑动效果

    这篇文章主要为大家详细介绍了Swift使用CollectionView实现广告栏滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • Swift实现3D轮播图效果

    Swift实现3D轮播图效果

    这篇文章主要为大家详细介绍了Swift实现3D轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02

最新评论