LookingGlassUI Logo with a rectangular border in shimmering gold on black

Swift Compatibility Platform Compatibility License - MIT Version GitHub last commit Mastodon Twitter

概述

基于设备方向创建波光、视差或其他旋转效果。

演示应用

Example 文件夹中有一个应用,演示了此软件包的功能。

安装和使用

此软件包与 iOS 14+ 兼容。

  1. 在 Xcode 中,转到 File -> Add Packages
  2. 粘贴仓库的 URL:https://github.com/ryanlintott/LookingGlassUI 并按版本选择。
  3. 使用 import LookingGlassUI 导入软件包

这是否已准备好用于生产环境?

实际上,这取决于您。我目前使用此软件包在 Old English Wordhord 应用 中的许多金色元素上创建金色波光效果。免费下载它并在设置中打开波光效果。

An iphone rotated back and forth showing the Old English Wordhord App with all the gold elements shimmering as if reflecting light. A screen recording on the right shows the same content.

https://apps.apple.com/us/app/old-english-wordhord/id1535982564![image](https://github.com/user-attachments/assets/3fbf59eb-d82a-4516-866e-8bcbd84852de)

Download on the App Store

支持此项目

LookingGlassUI 是开源且免费的,但如果您喜欢使用它,请考虑支持我的工作。

ko-fi

详情

.motionManager()

在添加任何自定义视图之前,在您的应用中添加一次 .motionManager 视图修饰符,放在此软件包中使用的任何其他视图或修饰符之上的层级结构中的某个位置。

ContentView()
    .motionManager(updateInterval: 0.1, disabled: false)

ShimmerView

需要 .motionManager()

此视图的行为类似于 Color,但当设备旋转时,会出现第二种波光颜色。可以通过参数启用该效果,或设置为仅在深色或浅色模式下显示。如果 MotionManager 被禁用,则只会显示背景颜色。

ShimmerView(mode: .darkModeOnly, color: .goldShimmer, background: .gold)

.shimmer()

需要 .motionManager()

如果您想向另一个 SwiftUI 视图添加默认的波光效果,请使用 .shimmer() 视图修饰符。如果 MotionManager 被禁用,则此修饰符无效。

Text("Hello, World!")
    .shimmer(color: .gold)

.parallax()

需要 .motionManager()

如果您想向任何 SwiftUI 视图添加视差效果,请使用 .parallax(multiplier: CGFloat, maxOffset: CGFloat) 视图修饰符。如果 MotionManager 被禁用,则此修饰符无效。

Text("Hello, World!")
    .parallax(multiplier: 40, maxOffset: 100)

LookingGlass

需要 .motionManager()

如果您想基于真实世界的旋转来投影任何 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()

如果您想基于设备旋转来旋转视图,请使用 .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)

rotation3dEffect()

基于四元数旋转 SwiftUI 视图。这确保了从任何点到任何其他点的平滑旋转。

Text("Hello, World")
    .rotation3dEffect(quaternion: Quat(pitch: .degrees(45), yaw: .zero, localRoll: .degrees(-30)), anchor: .center, anchorZ: 200, perspective: 0.2)

Quat

Quatsimd.quaternion 的包装器,带有方便的参数,例如 yaw、pitch 和 roll,以及从 pitch、yaw 和 localRoll 初始化的一种方法。

工作原理

窗口和反射模式

在窗口模式下,视图看起来像是您的手机是一个窗口,可以窥视 3D 环境。

在反射模式下,视图看起来像是您的手机有一个摄像头,从屏幕背面指向一个 3D 环境。这不是真正的反射,因为它没有考虑观看者的眼睛位置,但这是一个有用的近似值。

定位视图

视图基于四元数或 pitch、yaw 和 local roll 角度进行定位。所有角度为零意味着当手机平放且顶部远离用户时,视图将可见。(请参见下图)

  1. Local Roll 围绕 Z 轴旋转视图。10 度将使视图逆时针倾斜
  2. Pitch 将围绕 X 轴旋转视图。90 度将使视图直接出现在用户面前。
  3. Yaw 将再次围绕 Z 轴旋转视图。5 度将使视图稍微向用户的左侧移动。如果您将 isShowingInFourDirections 设置为 true,则该视图将被复制 3 次,并在您选择的位置的基础上分别旋转 -90、90 和 180 度。
  4. 然后,视图会根据提供的距离从原点移开。方向取决于选择窗口还是反射。
  5. 当用户移动他们的设备时,他们将始终在您设置的位置看到您的视图。

不用担心设备方向。虽然 Core Motion 没有对此进行补偿,但 LookingGlassUI 进行了补偿。

Digram titled LookingGlassUI Rotation: View Rotation Axes shows a tall grey rectangle flat one a surface with positive Z up, positive Y to the top of the rectangle and positive X to the right. Positive Z is World Up and positive Y is the top of view at zero, the direction user was facing when app was opened. Z axis has Yaw and Local Roll rotational arrows and X axis has Pitch. All arrows follow right hand rule. Another rectangle rotated 90 degrees is on top and a note reads: Orientation changes will not change axes.

其他旋转图

3D 空间在 iOS 上令人困惑,尤其是 Core Motion 和 SwiftUI 的 rotation3dEffect 似乎都使用不同的轴。我创建了这张图表来跟踪每个轴的工作方式。除非您想进行更多自定义操作,否则您可能不需要这些。重要的是要注意,屏幕旋转轴仅用于使用旋转体的右手定则来确定旋转方向。当平移视图(使用 .offset 或类似方法)时,轴是不同的,+Y 朝向屏幕底部,+X 朝向右侧。这些轴是不需要的,因为我们只处理旋转

iOS Rotation. One diagram on the left titled: Device Rotation Axes (Core Motion) shows a tall grey rectangle flat on a surface with positive Z up, positive Y to the top of the rectangle and positive X to the right. Axes have Yaw, Roll, and Pitch rotational arrows respectively, each following the right hand rule. An additional note says: Device axis do not change when orientation changes. Another diagram on the right titled: Screen Rotation Axes (SwiftUI .rotation3dEffect) shows a tall grey rectangle flat on a surface with negative Z up, positive Y to the top of the device and negative X to the right. Axes have Yaw, Roll, and Pitch rotational arrows respectively, each following the right hand rule. Another rectangle rotated 90 degrees is on top and a note reads: Screen top changes if app supports multiple orientation.