在 visionOS 中打造自定悬停效果

在 visionOS 中打造自定悬停效果

了解如何开发自定悬停效果，让用户在注视视图时实现视图更新。探索如何构建将透明度、缩放和裁剪效果组合在一起的按钮展开效果。探究相应的推荐做法，打造能够满足用户辅助功能需求的舒适效果。

章节
- 0:00 - Introduction
- 2:35 - Content effects
- 7:46 - Effect groups
- 9:40 - Delayed effects
- 12:09 - Accessibility
资源
相关视频

WWDC24
- 探索适用于 iOS、macOS 和 visionOS 的 RealityKit API
WWDC23
- 将你的窗口 App 提升至空间计算领域
下载

大家好欢迎观看“在 visionOS 中打造自定悬停效果” 我叫 Christian 是 SwiftUI 团队的一名工程师通过这个视频你将了解如何借助全新的 Custom Hover Effect API 让 SwiftUI 视图在用户注视时做出响应
在 visionOS 上交互式区域在用户注视时会高亮显示这些高亮显示是通过悬停效果来应用的悬停效果能让用户觉得你的 App 响应灵敏同时在用户轻捏指尖时提供关于将要触发哪个元素的反馈
悬停效果会自动添加到标准控件并可通过 hoverEffect 视图修饰符添加到自定控件如需进一步了解高亮显示等标准效果请观看“将你的窗口 App 提升至空间计算领域”
标准高亮显示效果在大多数情况下都能达到理想的效果但也有一些视图可以从自定效果中获益
滑块显示旋钮以吸引用户进行互动 “返回”按钮尺寸变大以显示上一个页面的名称标签栏弹出打开以显示标签
“Safari 浏览器”导航栏展开以显示浏览器标签页
利用 visionOS 2 中的全新 Custom Hover Effect API 你可以构建类似的悬停效果
自定悬停效果可以应用于 App 中任意位置的 SwiftUI 视图包括装饰元素和 RealityView 附件当用户注视视图时伸出手指与它交互时或是将鼠标光标移到它上方时就会应用这些效果
自定悬停效果从设计之初就充分考虑了隐私保护它们由系统在 App 进程之外应用不需要额外的授权或扩展
RealityKit 还新增了一个 API 可将悬停效果应用于 3D 内容如需了解详情请观看 “RealityKit 新功能” 我很高兴能够向大家介绍这个 API 首先我将说明如何使用内容效果来更改视图的外观然后我将介绍如何利用效果组将多个效果配合应用接下来我将介绍如何利用延迟效果来控制效果的时序
最后我将使用全新的 CustomHoverEffect 协议来根据用户的辅助功能偏好创建可重复使用的效果我们首先谈谈内容效果！
内容效果是指可以改变视图外观的基本效果它们可以更改视图的不透明度、转换视图的几何结构或应用裁剪形状这些效果只会更改视图的外观不会影响附近视图的布局效果会在两种状态之间转换在用户没有注视视图时效果会应用非活动状态
在用户注视视图时效果会转换为活动状态并更新视图像这个缩放效果一样的几何效果可修改视图的几何结构
裁剪效果可显示视图的隐藏部分不透明度效果可让内容淡入或淡出当用户将视线从视图上移开时效果就会转换回非活动状态可以将多种效果合成在一起创建细节丰富的转换效果比如这种展开效果我正在开发一款视频播放 App 希望为它添加这种效果在这个视频剩余的时间里我将逐步构建这种效果直到让它完美呈现为止
这是“Destination Video”App 它在模拟器中运行在左上角我添加了一个用于切换个人资料的按钮当我注视这个按钮时它会高亮显示作为构建完整展开效果的第一步我要让这个按钮在我注视时放大我们来编写一些代码
我已经将图标和详细信息文本放置在一个自定按钮中并且使用了自定按钮样式来控制按钮的外观这里就是我要添加缩放效果的位置
在 ButtonStyle 中我使用 hoverEffect 修饰符添加了标准高亮显示
为应用缩放效果我将添加新的基于代码块的 hoverEffect 修饰符
在代码块中我可以使用 scaleEffect 等修饰符来更改视图在活动和非活动状态之间转换时的外观
系统会使用 isActive 值 true 调用代码块以获取效果的活动状态并使用 isActive 值 false 来获取效果的非活动状态由于效果是由系统应用的这些调用会提前发生而不是在悬停实际发生时发生
由于我想让这个按钮在我注视时放大因此要在活动状态下应用 5% 的放大在非活动状态下不放大我们在模拟器中试试看
很好在我注视按钮时高亮显示效果和缩放效果同时应用
接下来我要使用裁剪效果来隐藏和显示按钮的详细信息文本裁剪效果会更改视图中的可见部分并且可用于在非活动状态下隐藏附加内容当效果变为活动状态时裁剪效果可以展开以显示之前隐藏的内容
回到自定按钮样式我要将现有的 clipShape 修饰符移到 hoverEffect 代码块中这样就能在效果变为活动或非活动状态时更改 clipShape
为了更改裁剪形状的大小我要为形状添加尺寸修饰符并使用提供给 hoverEffect 代码块的几何结构代理来计算活动和非活动状态下裁剪形状的大小
当效果处于活动状态时 clipShape 应该横跨整个按钮以便显示整个按钮但是当效果处于非活动状态时按钮应该是圆形的并且应该仅显示图标所以要让 clipShape 的宽度和高度相匹配从而生成圆形 clipShape
最后我要使用新的锚点参数将裁剪形状与按钮的前边缘对齐确保在效果处于非活动状态时显示图标我们在模拟器中试试看
太棒了！当我注视按钮时它会展开当我将视线移开时它会自动收起我要打磨一下这个效果让详细信息文本在按钮展开时淡入
由于只有文本应该淡入因此我要为详细信息文本添加 hoverEffect 并应用不透明效果让文本从 0 到 1 淡入
已经很接近理想效果了但还是不太对劲我们再来看一下
我想让详细信息文本在按钮展开时淡入但只有在我注视详细信息文本应该出现的那个空间时它才会淡入我们来讨论一下原因
当用户注视附加了悬停效果的视图时悬停效果就会变为活动状态我对整个按钮应用了缩放效果和 clipShape 效果所以当我注视按钮中的任意位置时这些效果会变为活动状态但是我对详细信息文本应用了不透明度效果所以只有当我注视文本时这个效果才会变为活动状态我需要换一种方法以便同时激活这些效果为此我会使用效果组只要组中的任意效果变为活动状态分组在一起的效果就会一起应用如果来自不同视图的效果分组在一起那么当我注视其中任意视图时这个组就会变为活动状态这意味着效果组可以控制 App 的哪些区域会激活某个效果
你可以通过两种方式将效果分组：显式和隐式我将首先以显式方式对这些效果进行分组
为此我要创建 HoverEffectGroup 来表示这个组我要使用一个 Namespace 来为这个组提供唯一 ID
现在我已经确定了组接下来我要以显式方式将每个效果添加到这个组首先是不透明效果我要将这个组提供给 ButtonStyle 并将其余效果添加到组中现在所有效果都在同一个组中它们会作为单个效果一起激活
太棒了！所有效果配合应用、一起激活文本会随着按钮展开而淡入也会随着按钮收缩而淡出
像这样以显式方式对效果进行分组可提供最大限度的灵活性和控制权但如果我不需要那么大的控制权也可用隐式方式对效果进行分组
不必为每个效果提供 hoverEffectGroup 只需为视图添加一个 hoverEffectGroup 修饰符即可这会以隐式方式将这个视图和它子视图上的每个效果添加到组中因此我无需将组添加到每个效果如果不向修饰符提供组系统也会以隐式方式为我创建组非常方便对吧？个人资料按钮的开发进展顺利我使用了内容效果和效果组来应用所需的所有视觉变化但是我一注视这个按钮它就会立即展开这可能会分散注意力如果它能稍等一下再展开那就更好了我可以使用延迟效果来控制按钮展开的时间默认情况下悬停效果会立即应用这种方式非常适合吸引用户进行互动的微妙效果但几乎所有效果都可以从延迟中获益哪怕是短暂的延迟也是如此这可以防止效果在用户快速浏览 App 时短暂激活
用户也永远不会完全静止不动使用延迟可让效果短暂保持活动状态以适应这种本能的动作从而避免出现闪烁
最后显示附加内容的效果应该采用更长的延迟这些效果很容易分散注意力应在用户的视线聚焦于 App 的特定元素时保留一会儿适合每个效果的延迟时间各不相同因此请务必戴上 Apple Vision Pro 尝试各种效果看看合适的效果是什么样的
由于个人资料按钮会显示内容因此我会添加时间更长的延迟
为了应用延迟我会将这个效果包装在动画修饰符中从而提供延迟动画效果
我使用了默认动画在效果变为活动状态时使用时间较长的延迟而在效果变为非活跃状态时使用时间较短的延迟
不过我不会让 scaleEffect 延迟这个效果可提供即时反馈因此也应该立即应用
由于文本会随着按钮展开而淡入因此我要将同一动画效果应用于不透明度效果以便让各个效果保持同步我们再尝试运行一下这个效果现在它有了延迟
很好按钮仍可通过缩放效果和高亮显示效果提供即时反馈但会稍等片刻才展开
在继续介绍后面的内容之前我们再多了解一下如何为效果添加动画效果
如果没有指定动画效果则效果会使用 SwiftUI 的默认动画
悬停效果支持大家非常熟悉的线性、缓出和弹簧等动画效果以及带有自定时间曲线的动画效果
但 CustomAnimation 类型不受支持因为这些类型无法应用到 App 的进程之外
我觉得这个按钮展开效果很棒但是对动态效果敏感的人可能会感到不适在制作各种效果时应该始终考虑到辅助功能并在需要时提供替代效果在这个视频余下的部分中我要更新个人资料按钮从而在“减弱动态效果”设置处于启用状态时使用交叉淡入淡出效果
在我注视这个按钮时它仍会展开再收起但会改为使用淡入淡出效果现在我已经编写了一个淡入淡出效果来让详细信息文本淡入我不会创建一模一样的效果而是会使用全新的 CustomHoverEffect 协议来创建适用于两个位置的效果
为了创建可复用的效果我要拷贝之前编写的 hoverEffect 修饰符将它放在遵从 CustomHoverEffect 协议的全新 FadeEffect 类型中
在这个效果的 body 方法中我可以使用在视图中用过的 hoverEffect 修饰符这样便于从简单处着手然后根据需要进行重构现在这个效果自己构成了一个类型我可以通过允许自定非活动和活动状态下的不透明值来让这个效果变得更加实用
现在我有了可重复使用的淡入淡出效果我要返回并在按钮视图中使用这个效果只需移除 hoverEffect 代码块并将它替换为新的 FadeEffect()
这样一来我的代码既可以重复使用又变得更加简洁我非常喜欢这一点我还要将展开效果移到 CustomHoverEffect 类型中和之前一样我要将 hoverEffect 代码块从视图中移出将它放在新的 CustomHoverEffect 类型中称为 ExpandEffect 类型
回到按钮样式我将移除基于代码块的 hoverEffect
并将它替换为新的 ExpandEffect() 漂亮！
现在我的所有效果都能重复使用了我可以更新个人资料按钮从而在启用了“减弱动态效果”时使用交叉淡入淡出效果
我要首先添加一个 @Environment 属性以访问 reduceMotion 设置
在 reduceMotion 处于启用状态时不应该应用 ExpandEffect() 所以我会改为应用空白效果空白效果就是不起任何作用的效果为了在不同效果之间动态切换需要将每个效果包装在 HoverEffect 类型中以抹除它们各自的类型现在还没有完成不过我要在模拟器中查看一下进度
背景形状还不正确但按钮不再展开而详细信息文本仍会正常淡入我要将背景更新为与文本同步交叉淡入淡出为此我要将现有背景替换为两个独立的背景视图第一个视图是横跨按钮的 Capsule() 应该在我注视按钮时显示出来我要在 reduceMotion 状态为启用时将 FadeEffect 应用于这个视图
第二个视图是圆形背景应该仅在我没有注视按钮时显示我要在这里应用 FadeEffect 以及自定不透明度值让这个视图在另一个视图淡入时淡出
效果很棒！现在当我注视按钮时背景和详细信息文本会一起淡入这个展开式按钮现在大功告成了！我通过将几个简单的特效合并在一起创建了一个精细的效果通过选择恰当的延迟时间并尊重用户对辅助功能的偏好我确保了这个效果能够为所有用户带来很棒的使用感受现在是时候发挥创意构建你自己的自定悬停效果了！强烈建议大家从简单处着手逐步构建效果但也要让视图的某些部分保持静态比如我创建的个人资料按钮中的图标在效果转换过程中这些锚定元素有助于保持连贯性当然你需要对效果进行全面测试模拟器是快速迭代的理想之选但是要想了解效果的使用感受唯一方法就是戴上 Apple Vision Pro 测试一下
关于如何创建令人惊叹的悬停效果如需了解更多技巧请查看最新版《人机界面指南》感谢大家观看！

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .clipShape(.capsule)
                .hoverEffect { effect, isActive, _ in
                    effect.scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

5:37 - Button with Clip and Scale Effects

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

6:50 - Expanding Button with Ungrouped Fade

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

8:19 - Expanding Button with Explicit Group

struct ProfileButtonView: View {
    var action: () -> Void = { }
    @Namespace var hoverNamespace
    var hoverGroup: HoverEffectGroup {
        HoverEffectGroup(hoverNamespace)
    }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(in: hoverGroup) { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle(hoverGroup: hoverGroup))
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(width: 44, height: 44)
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

struct ProfileButtonStyle: ButtonStyle {
    var hoverGroup: HoverEffectGroup?
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(.thinMaterial)
            .hoverEffect(.highlight, in: hoverGroup)
            .hoverEffect(in: hoverGroup) { effect, isActive, proxy in
                effect.clipShape(.capsule.size(
                    width: isActive ? proxy.size.width : proxy.size.height,
                    height: proxy.size.height,
                    anchor: .leading
                ))
                .scaleEffect(isActive ? 1.05 : 1.0)
            }
    }
}

9:13 - Expanding Button with Implicit Group

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.opacity(isActive ? 1 : 0)
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                    .scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

10:51 - Expanding Button with Delayed Effect

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect { effect, isActive, _ in
                        effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                            $0.opacity(isActive ? 1 : 0)
                        }
                    }
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect { effect, isActive, proxy in
                    effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                        $0.clipShape(.capsule.size(
                            width: isActive ? proxy.size.width : proxy.size.height,
                            height: proxy.size.height,
                            anchor: .leading
                        ))
                    }.scaleEffect(isActive ? 1.05 : 1.0)
                }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

12:50 - Expanding Button with Reusable Effects

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(FadeEffect())
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background(.thinMaterial)
                .hoverEffect(.highlight)
                .hoverEffect(ExpandEffect())
        }
    }

    struct ExpandEffect: CustomHoverEffect {
        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, proxy in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                }.scaleEffect(isActive ? 1.05 : 1.0)
            }
        }
    }

    struct FadeEffect: CustomHoverEffect {
        var from: Double = 0
        var to: Double = 1

        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, _ in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.opacity(isActive ? to : from)
                }
            }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

14:14 - Final Expanding Button with Accessibility Support

struct ProfileButtonView: View {
    var action: () -> Void = { }
    var body: some View {
        Button(action: action) {
            HStack(spacing: 2) {
                ProfileIconView()
                ProfileDetailView()
                    .hoverEffect(FadeEffect())
            }
        }
        .buttonStyle(ProfileButtonStyle())
        .hoverEffectGroup()
    }

    struct ProfileButtonStyle: ButtonStyle {
        @Environment(\.accessibilityReduceMotion) var reduceMotion
        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .background {
                    ZStack(alignment: .leading) {
                        Capsule()
                            .fill(.thinMaterial)
                            .hoverEffect(.highlight)
                            .hoverEffect(
                                reduceMotion ? HoverEffect(FadeEffect()) : HoverEffect(.empty))
                        if reduceMotion {
                            Circle()
                                .fill(.thinMaterial)
                                .hoverEffect(.highlight)
                                .hoverEffect(FadeEffect(from: 1, to: 0))
                        }
                    }
                }
                .hoverEffect(
                    reduceMotion
                    ? HoverEffect(.empty)
                    : HoverEffect(ExpandEffect())
                )
        }
    }

    struct ExpandEffect: CustomHoverEffect {
        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, proxy in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.clipShape(.capsule.size(
                        width: isActive ? proxy.size.width : proxy.size.height,
                        height: proxy.size.height,
                        anchor: .leading
                    ))
                }.scaleEffect(isActive ? 1.05 : 1.0)
            }
        }
    }

    struct FadeEffect: CustomHoverEffect {
        var from: Double = 0
        var to: Double = 1

        func body(content: Content) -> some CustomHoverEffect {
            content.hoverEffect { effect, isActive, _ in
                effect.animation(.default.delay(isActive ? 0.8 : 0.2)) {
                    $0.opacity(isActive ? to : from)
                }
            }
        }
    }

    struct ProfileIconView: View {
        var body: some View {
            Image(systemName: "person.crop.circle")
                .resizable()
                .scaledToFit()
                .frame(
                    width: 44,
                    height: 44
                )
                .padding(6)
        }
    }

    struct ProfileDetailView: View {
        var body: some View {
            VStack(alignment: .leading) {
                Text("Peter McCullough")
                    .font(.body)
                    .foregroundStyle(.primary)
                Text("Switch profiles")
                    .font(.footnote)
                    .foregroundStyle(.tertiary)
            }
            .padding(.trailing, 24)
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

章节

资源

相关视频

WWDC24

WWDC23