基于设备方向创建波光、视差或其他旋转效果。
.motionManager()
- 一个视图修饰符,用于将 MotionManager
类添加到环境中。ShimmerView
- 一种颜色,当设备旋转时,它会像反射光一样与另一种颜色闪烁。.shimmer()
- 一个视图修饰符,用于覆盖一层波光颜色,当设备旋转时,它会像反射光一样闪烁。.parallax()
- 一个视图修饰符,用于移动视图以在设备旋转时添加视差效果。LookingGlass
- 一个视图,它将其子视图旋转到相对于真实世界的特定 3D 角度,并相对于设备定位它。.deviceRotationEffect()
- 一个视图修饰符,用于根据设备旋转来旋转视图。.rotation3dEffect()
- 一个视图修饰符,用于基于四元数旋转视图。Quat
- simd.quaternion
的包装器,带有方便的扩展,例如 yaw、pitch 和 roll。Example
文件夹中有一个应用,演示了此软件包的功能。
此软件包与 iOS 14+ 兼容。
File -> Add Packages
https://github.com/ryanlintott/LookingGlassUI
并按版本选择。import LookingGlassUI
导入软件包实际上,这取决于您。我目前使用此软件包在 Old English Wordhord 应用 中的许多金色元素上创建金色波光效果。免费下载它并在设置中打开波光效果。
LookingGlassUI 是开源且免费的,但如果您喜欢使用它,请考虑支持我的工作。
在添加任何自定义视图之前,在您的应用中添加一次 .motionManager
视图修饰符,放在此软件包中使用的任何其他视图或修饰符之上的层级结构中的某个位置。
ContentView()
.motionManager(updateInterval: 0.1, disabled: false)
此视图的行为类似于 Color
,但当设备旋转时,会出现第二种波光颜色。可以通过参数启用该效果,或设置为仅在深色或浅色模式下显示。如果 MotionManager
被禁用,则只会显示背景颜色。
ShimmerView(mode: .darkModeOnly, color: .goldShimmer, background: .gold)
如果您想向另一个 SwiftUI 视图添加默认的波光效果,请使用 .shimmer()
视图修饰符。如果 MotionManager
被禁用,则此修饰符无效。
Text("Hello, World!")
.shimmer(color: .gold)
如果您想向任何 SwiftUI 视图添加视差效果,请使用 .parallax(multiplier: CGFloat, maxOffset: CGFloat)
视图修饰符。如果 MotionManager
被禁用,则此修饰符无效。
Text("Hello, World!")
.parallax(multiplier: 40, maxOffset: 100)
如果您想基于真实世界的旋转来投影任何 SwiftUI 视图并创建您自己的自定义效果,请使用 LookingGlass
。内容看起来像是从设备中心旋转和定位的,无论它在屏幕上的位置,或者是否在滚动视图中。如果 MotionManager
被禁用,则不会显示任何内容。
LookingGlass(.reflection, distance: 4000, perspective: 0, pitch: .degrees(45), yaw: .zero, localRoll: .zero, isShowingInFourDirections: false) {
Text("Hello, World")
.foregroundColor(.white)
.frame(width: 500, height: 500)
.background(Color.red)
}
如果您想基于设备旋转来旋转视图,请使用 .deviceRotationEffect()
。内容基于其自身的中心旋转和定位。如果 MotionManager
被禁用,则不会显示任何内容。
Text("Hello, World")
.foregroundColor(.white)
.frame(width: 500, height: 500)
.background(Color.red)
.deviceRotationEffect(.reflection, distance: 4000, perspective: 0, pitch: .degrees(10), yaw: .zero, localRoll: .zero, isShowingInFourDirections: false)
基于四元数旋转 SwiftUI 视图。这确保了从任何点到任何其他点的平滑旋转。
Text("Hello, World")
.rotation3dEffect(quaternion: Quat(pitch: .degrees(45), yaw: .zero, localRoll: .degrees(-30)), anchor: .center, anchorZ: 200, perspective: 0.2)
Quat
是 simd.quaternion
的包装器,带有方便的参数,例如 yaw、pitch 和 roll,以及从 pitch、yaw 和 localRoll 初始化的一种方法。
在窗口模式下,视图看起来像是您的手机是一个窗口,可以窥视 3D 环境。
在反射模式下,视图看起来像是您的手机有一个摄像头,从屏幕背面指向一个 3D 环境。这不是真正的反射,因为它没有考虑观看者的眼睛位置,但这是一个有用的近似值。
视图基于四元数或 pitch、yaw 和 local roll 角度进行定位。所有角度为零意味着当手机平放且顶部远离用户时,视图将可见。(请参见下图)
不用担心设备方向。虽然 Core Motion 没有对此进行补偿,但 LookingGlassUI 进行了补偿。
3D 空间在 iOS 上令人困惑,尤其是 Core Motion 和 SwiftUI 的 rotation3dEffect 似乎都使用不同的轴。我创建了这张图表来跟踪每个轴的工作方式。除非您想进行更多自定义操作,否则您可能不需要这些。重要的是要注意,屏幕旋转轴仅用于使用旋转体的右手定则来确定旋转方向。当平移视图(使用 .offset 或类似方法)时,轴是不同的,+Y 朝向屏幕底部,+X 朝向右侧。这些轴是不需要的,因为我们只处理旋转