如何让小组件更加生动

了解如何为你的 App 和游戏制作兼具动画和交互性的小组件。我们将向你展示如何调整条目过渡的动画，以及使用 SwiftUI 中的 Button 和 Toggle 来增加交互性，以便你可以直接在主屏幕和锁定屏幕上创造强大时刻。

章节

1:23 - Animations
7:45 - Interactivity

资源

- 高清视频
- 标清视频

相关视频

WWDC23

WWDC22

深入了解 App Intents

下载

♪ ♪

Luca：大家好！我是 Luca 一名 SwiftUI 团队的工程师今天我们将向你介绍如何使用令人兴奋的新功能让你的小部件更加生动小组件是 iOS 和 macOS 体验中最受欢迎的部分并且随着交互性和动画的加入这些小组件甚至展现出前所未有的强大能力

交互性可以让你的用户在小组件中直接处理数据从而为执行 App 中的重要操作打造强大的交互动画则通过帮助用户感知内容的变化方式及操作后的结果为小组件带来了生动活泼的体验我对这些新功能都十分兴奋所以我们开始今天的讲座吧首先我们会介绍动画以及为小组件打造精美外观到底有多容易接着我会向你演示如何在小组件中添加交互性首先我们从动画开始在本次讲座中我们会使用我的朋友 Nils 开发的 App 来跟踪一天之内的咖啡因摄入该 App 现已具备小组件它可显示咖啡因摄入总量以及我今天喝的最后一杯饮料如果我使用最新的 SDK 来重新编译该小组件那么小组件中的内容只要发生变化系统就会使用默认动画来过渡不同的条目接下来我们会对该小组件进行调整使其看起来更棒但在进入 Xcode 前我先来简要介绍一下如何将动画与小组件进行结合在常规 SwiftUI App 中你会使用状态来驱动视图中的变化并且动画是通过使用类似 withAnimation 的修饰符由状态变化驱动但是小组件的工作方式略有不同小组件没有状态相反小组件会创建一个包含条目的时间线并与在各个具体时间上渲染的视图一一对应 SwiftUI 会决定条目间的异同并对发生变化的部分使用动画默认情况下小组件会使用隐式弹簧动画以及各种隐式内容过渡但你也可以使用 SwiftUI 提供的开箱即用式过渡、动画以及内容过渡 API 来自定义小组件的动画效果我不打算再进一步展开讲解 SwiftUI 工作中所有动画图元的细节如果你想了解这部分内容请观看 “探索 SwiftUI 动画”精彩讲座现在我来打开 Xcode 向你展示如何仅凭一些调整便可让你的小组件和清晨的卡布奇诺一样精致以及新的 Xcode Preview API 是如何帮助你快速迭代这些动画的

这里展示的是小组件所有的视图主视图使用了 VStack 其中包含两个视图第一个展示咖啡因总量第二个展示我今天喝的最后一种饮料如果有的话请注意观察我是如何使用 containerBackground 修饰符来定义小组件背景的从而该 App 可以显示在 Mac 和 iPad 新的支持位置通常情况下为了查看小组件动画你需要设置一批条目并等待其显示在屏幕上的时刻但这样的话可能会非常繁琐而且还会拖慢你的速度不过好在今年我们引入了一个很好的解决方案即新的 Preview API 我可以为 systemSmall 中的小组件定义一个 Preview 并传入定义小组件的类型接着使用此前定义的条目指定渲染时间轴的方式当我在画布上完成上述操作后我就可以看到时间轴的预览以及每个条目的视觉效果但快看看这个如果我逐个点击预览我便可以看到小组件在条目间过渡时的动画效果这真的太棒了！但这还只是新的 Preview API 功能的冰山一角想要进一步了解更多有关新的 Preview API 功能的信息请一定要看看这个讲座 “使用 Xcode Previews 构建程序化 UI” 接下来我们来调整这些动画首先我从咖啡因总量的文本开始当前该文本只是与下一个数值交叉淡入淡出但我很想为数值的出现添加一些亮点在本例中视图保持不变只有文本内容会发生变化为了对其增添动画效果我们可以使用内容过渡我会添加一个显示咖啡因数值数字文本这是一个专门为突出重要数值变化而设计的内容过渡看起来不错！现在我再来专注看看显示最后一杯饮料的视图在这里我想添加一个过渡来强调新的饮料即将出现首先我会使用 ID 修饰符将该视图的识别符与正在渲染的特定 log 进行关联这就会告知 SwiftUI 只要该 log 发生更改当前就是一个新视图并且我们需要过渡到新视图现在我来指定一个过渡效果推出效果就很不错该从哪边开始呢？底部应该可以现在你就知道接下来要做什么了回到预览画布

我喜欢这个从底部进行的过渡我们来做最后一个调整在喝了许多咖啡之后我有些不安所以我希望这个过渡可以用动画曲线体现出来比较好的一点在于我可以就像在常规 SwiftUI App 里一样使用 animation 修饰符选择间隔较短的平滑弹簧动画然后将 animation 绑定到 log 中现在 animation 就会和咖啡因量一致我对当前的效果很满意现在我们来重点看看交互性借助交互性你可以直接在小组件上执行操作在我们进入 Xcode 之前我想花几分钟来谈谈小组件的工作架构以便你更好地理解交互性工作原理在创建小组件的时候你需要定义一个小组件扩展该扩展会被系统发现并作为独立进程运行小组件会定义一个时间线提供程序来返回一系列条目也就是小组件模型如果小组件可见系统就会启动小组件扩展进程并向时间线提供程序请求条目这些条目就会反馈给视图构建器也就是小组件配置的一部分然后其便可根据这些条目生成一系列视图之后系统就会生成这些视图的表示并将其存档在磁盘上如果需要显示特定条目系统就会进行解码并在其进程中渲染小组件的存档代表在这里我们先停一下强调一下最后一点你的视图代码只会在存档期间运行系统进程会渲染视图中单独的表示但如果你的数据不是静态的那么你可能就需要更新这些条目无论你什么时候需要更新小组件上显示的数据在 App 中调用 reloadTimelines 函数即可实现这个过程和我刚描述过的完全相同即重新生成新条目然后在磁盘上存档视图的新副本在该架构中你需要注意以下 3 个要点首先在小组件可见时你的代码不会运行你可以通过更新时间线条目来驱动小组件内容的变化并且这也适用于交互性小组件通常情况下小组件的更新都会尽可能进行但需要注意的是通过交互发起的重新加载总是能确保进行在介绍完这些内容后我们一起来看看如何增加交互性比较好的一点在于你可以适用熟悉的控件例如 Button 和 Toggle 来让部分小组件具有交互性但请记住由于小组件在不同的进程中渲染所以 SwiftUI 不会在进程空间中执行闭包或更改你的绑定因此我们需要一个表示行为的方法可以被小组件扩展执行以及被系统调用不过好在我们已经有了解决方案 App Intents 你可能已经用过 App Intents 来将 App 的操作公开给快捷指令或 Siri 而现在你可以使用同一个 App Intents 来表示小组件中的操作从本质上来看 App Intents 是一个协议可让你在代码中定义由系统执行的操作例如我在这里定义了一个 AppIntent 用来在 Todo App 中切换代办事项 AppIntent 定义了一些参数作为输入及一个 perform 异步函数用于编写运行 intent 的业务逻辑 App Intents 功能十分强大想要进一步了解有关该框架的信息请一定要看看 WWDC22 和 23 中的 “深入了解 App Intents” 以及“探索 App Intents 的增强功能”讲座为了支持直接从 UI 中执行 App Intents 的能力在你导入 SwiftUI 和 App Intents 时 Button 和 Toggle 上有一组新的初始化程序可将 AppIntent 作为参数并在这些控件交互时执行 intent 你需要注意的是交互式小组件只支持使用 AppIntent 的 Button 和 Toggle 其他控件都不会起作用当然了这些初始化程序也适用于 App 这点很棒因为这样你就可以在小组件和 App 之间共享 AppIntent 逻辑接下来我们回到 Xcode 和咖啡跟踪 App 并为其增加一些交互性当前用户只能通过打开 App 记录饮料而这里是小组件能发挥作用的地方可以作为加速器来展示 App 中最重要的操作对于我的 App 而言该操作便是记录新饮料所以我们来将其添加到我已经创建好的文件中首先我会定义一个遵循 AppIntent 的类型来记录新的饮料我们来为其设置一个可读标题以供系统适用然后在存储中记录 espresso 实现 perform 的要求并返回一个空的意图 result 我想提醒你的是 perform 是一个异步函数所以如果你需要执行任何异步操作例如写入数据库就应该充分利用函数就像我在这里等待 log 写入操作时所做的那样一旦 perform 返回系统就会立即启动重新加载小组件时间轴来更新小组件的内容所以你需要确保在 perform 返回前持久化所有必要信息再来重新加载更新过的小组件我已经将饮料硬编码为 espresso 但我还想将特定饮料传递给 log 为此我们可以添加带有 @Parameter 属性包装器的存储属性以及可填充参数的初始化程序使用该属性包装器十分重要因为只有标记有该属性包装器的存储属性才能得到保存以及当 intent 在小组件扩展中执行的时候才可以使用在我们添加 Button 调用 intent 前我想强调一下使用 App Intents 在生态系统方面的重要优势我刚刚定义的 AppIntent 将会用于快捷指令和 Siri 所以在此处定义的投入将会为你的用户体验带来回报而远远超过了小组件本身现在我们开始为小组件添加按钮我们需要创建一个包含 Button 的新视图在该视图中我会使用带有 App intent 的 Button 初始化程序所以我们可以传入刚刚定义的内容接着我们使用 Spacer 将该视图添加到小组件其余部分现在一切准备就绪我们来编译和运行一下看看在小组件上的效果如何在这里我有一个小建议实际上你可以直接构建小组件目标然后 Xcode 就会帮你将小组件安装到主屏幕上现在我的小组件就有了刚刚定义的按钮如果轻点该按钮我就可以记录最后这一杯 espresso 但我还想额外再做一个更改来让小组件提供最佳的用户体验 AppIntent 执行结束后会导致小组件重新加载时间线这就会带来从操作到 UI 中结果更改的一小段延迟但是在 Mac 上的 iPhone 小组件中该延迟会更加明显所以我们为你提供了一个开箱即用式的解决方案例如在我的小组件中展示咖啡因总量的数值在更新后的条目到达前都不会更新我们可以使用 invalidatableContent 修饰符来注释该视图我在 iPhone 和 Mac 上都添加了该小组件轻点按钮显示咖啡因总量的视图展示了一个系统效果告诉我们在更新之间其值都是无效刚刚我们看到了 Button 的效果以及使用 invalidatableContent 修饰符是如何让你帮助用户改善延迟感的但你在使用该修饰符时需要明智点你不需要对所有可能改变的单个视图进行注释只对有意义的视图使用该修饰符从而为你的用户设立恰当的期望 Toggle 则更进一步可在得到交互时自动更新显示无需等待与小组件扩展之间的往返通过预渲染两种配置下的切换样式这便可以在存档时自动由系统完成如果你需要定义自己的切换样式请确保在样式中检查 configuration.isOn 属性并利用其切换外观以上就是对交互性和动画的概述借助动画和交互性你可以为小组件注入新的活力并且现在你还可以将其放置在所有新位置上无论你的用户身处何处你都可以为他们带来这些微小又令人愉悦的交互所以请利用新的 Xcode Preview API 来为你的小组件调整动画寻找 App 中最重要的操作并将其展示在小部件中随时随地为你的用户提供强大的交互谢谢大家！ ♪ ♪

3:54 - Usage for the container background modifier

.containerBackground(for: .widget) {
    Color.cosmicLatte
}

4:22 - Define a preview for the caffeine tracker widget

#Preview(as: WidgetFamily.systemSmall) {
    CaffeineTrackerWidget()
} timeline: {
    CaffeineLogEntry.log1
    CaffeineLogEntry.log2
    CaffeineLogEntry.log3
    CaffeineLogEntry.log4
}

5:41 - Add a numeric text content transition

struct TotalCaffeineView: View {
    let totalCaffeine: Measurement<UnitMass>

    var body: some View {
        VStack(alignment: .leading) {
            Text("Total Caffeine")
                .font(.caption)

            Text(totalCaffeine.formatted())
                .font(.title)
                .minimumScaleFactor(0.8)
                .contentTransition(.numericText(value: totalCaffeine.value))
        }
        .foregroundColor(.espresso)
        .bold()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

6:21 - Set up transition on LastDrinkView

struct LastDrinkView: View {
    let log: CaffeineLog

    var body: some View {
        VStack(alignment: .leading) {
            Text(log.drink.name)
                .bold()
            Text("\(log.date, format: Self.dateFormatStyle) · \(caffeineAmount)")
        }
        .font(.caption)
        .id(log)
        .transition(.push(from: .bottom))
    }

    var caffeineAmount: String {
        log.drink.caffeine.formatted()
    }

    static var dateFormatStyle = Date.FormatStyle(
        date: .omitted, time: .shortened)
}

7:18 - Configuring animation for the transition

struct LastDrinkView: View {
    let log: CaffeineLog

    var body: some View {
        VStack(alignment: .leading) {
            Text(log.drink.name)
                .bold()
            Text("\(log.date, format: Self.dateFormatStyle) · \(caffeineAmount)")
        }
        .font(.caption)
        .id(log)
        .transition(.push(from: .bottom))
        .animation(.smooth(duration: 1.8), value: log)
    }

    var caffeineAmount: String {
        log.drink.caffeine.formatted()
    }

    static var dateFormatStyle = Date.FormatStyle(
        date: .omitted, time: .shortened)
}

9:18 - Reload the timeline for a widget

WidgetCenter.shared.reloadTimelines(ofKind: "LocationForecast")

13:06 - App intent to log a caffeine drink

import AppIntents

struct LogDrinkIntent: AppIntent {
    static var title: LocalizedStringResource = "Log a drink"
    static var description = IntentDescription("Log a drink and its caffeine amount.")

    @Parameter(title: "Drink", optionsProvider: DrinksOptionsProvider())
    var drink: Drink

    init() {}

    init(drink: Drink) {
        self.drink = drink
    }

    func perform() async throws -> some IntentResult {
        await DrinksLogStore.shared.log(drink: drink)
        return .result()
    }
}

15:10 - Create view to log a new drink

struct LogDrinkView: View {
    var body: some View {
        Button(intent: LogDrinkIntent(drink: .espresso)) {
            Label("Espresso", systemImage: "plus")
                .font(.caption)
        }
        .tint(.espresso)
    }
}

16:28 - Use the invalidatable content modifier

struct TotalCaffeineView: View {
    let totalCaffeine: Measurement<UnitMass>

    var body: some View {
        VStack(alignment: .leading) {
            Text("Total Caffeine")
                .font(.caption)

            Text(totalCaffeine.formatted())
                .font(.title)
                .minimumScaleFactor(0.8)
                .contentTransition(.numericText(value: totalCaffeine.value))
                .invalidatableContent()
        }
        .foregroundColor(.espresso)
        .bold()
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

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