SwiftUI 动态效果

大家好，我是 Kurt， 是全球开发者关系团队的一名技术布道师， 今天能与大家见面，并欢迎所有 在线的伙伴，我感到非常激动。 在加入开发者关系团队之前， 我曾在 SwiftUI 团队担任工程师， 专注导航和 API 设计。

今天，我将探讨如何利用 SwiftUI 在App中实现动态效果的基础知识。

随着设备性能的不断提升， 用户界面也变得更加生动灵活。 如果设计得当，这些动态效果 能让设备显得更加生动且富有个性。 动态效果使App和平台更易于理解。 它能提供上下文信息，并引导用户的注意力。 此外，它本身就充满乐趣。

这些动态交互的实现需要多方面要素的协同作用。 其中包括用户从一个视图 切换到另一个视图的过渡效果， 例如在“设置”App 中滑入某个视图； 还有用户直接与设备 交互的专注模式选项和手势， 例如放大地图以查看更多细节， 或在App之间滑动切换。

最后，还有动画效果，即屏幕上的对象移动、 放大或改变视觉属性， 例如“灵动岛”中的实时活动。 所有这些元素协同工作， 共同打造出流畅且交互性强的界面。

SwiftUI 是将流畅动态 效果融入App的最佳方式。

SwiftUI 中的动态效果包罗万象。 最简单的情况是，只需使用 内置的 SwiftUI 组件， 即可获得自动过渡效果。

进阶使用状态驱动的动画， 你可以从修饰符菜单中选择， 告知 SwiftUI 在特定属性发生变化时

如何进行动画效果； 或者直接采用完全自定义的动画， 逐帧精确指定应发生的变化。

今天，我将带大家了解涵盖这一全范围的示例， 以便你能选择合适的工具， 为你的App打造恰到好处的动态交互体验。

许多 SwiftUI 视图会自动 提供平滑的运动效果。 我将分享“愿望清单”App 中的几个示例， 并演示如何调整这些自动效果， 以在App中营造出你想要的氛围。 随后，我将探讨如何使用 SwiftUI 为 App 添加状态驱动的动画。 修饰符与属性。 我将介绍这些动画的基础知识， 以便你能根据具体任务选择合适的技术。 最后，我将演示 SwiftUI 中自定义动画的强大功能， 并为你推荐一些深入学习的资源。

当你在 SwiftUI 中使用内置视图时， 会自动获得许多动态效果。

这款“愿望清单”App 正是 这一强大功能的绝佳示例。 当用户点击某条行程时， 导航堆栈会进行“推送”操作。 勾选标记等缩略图图标会反馈交互操作。 详情会弹回缩略图中。 弹出视图会以动画效果显示。 弹出菜单会从 Liquid Glass 按钮中渐变而出。 滚动视图会在用户滑动时自动加速， 停止滑动时减速， 并可选择在特定视图处停下。

我将介绍四种不同的 SwiftUI 视图， 你可以通过它们自动获得这些动态效果， 首先是导航堆栈——就像愿望清单 标签页中这个用于展示行程详情的导航堆栈一样。

“愿望清单”App 在每个 标签页中都使用了一个导航堆栈。

在这个堆栈中，包含着代表 各种行程的所有这些图块。 我将专注模式介绍 一个 for each 循环， 它会遍历“秋季短途旅行” 这类集合中的所有行程。

每个缩略图都由一个导航链接绘制而成， 该链接提供一个目的地视图以及一个标签。

标签是用户点击的界面部分。 当用户点击该标签时， 目标视图会被推入导航堆栈。 默认情况下，目标视图会从屏幕尾部滑入； 当用户点击返回按钮或 在屏幕上滑动时，目标视图会通过动画效果淡出。 现在，一些 App （例如“音乐”和“新闻”） 会使用一种称为“`zoom` 过渡”的技术来优化这些推入和弹出操作。

只需三个步骤即可让导航堆栈使用`zoom` 过渡效果。 首先，在视图的属性中添加一个命名空间。 命名空间是一个唯一标识符， SwiftUI 可以利用它将两段代码关联起来。

其次，向目标视图添加 navigationTransition 修饰符， 并传入 zoom 参数、 一个唯一 ID 以及命名空间。

最后，向链接的标签添加 matchTransitionSource 修饰符。

现在，当我点击旅行图片时， 愿望清单App会使用`zoom` 过渡效果。

当我返回时，详情视图会缩小回缩略图。

当目标视图重复 显示标签中包含的内容时， `zoom` 过渡效果表现尤为出色， 比如这张来自锡安国家公园的精美图片。

有时导航链接的标签内容更为详细， 例如愿望清单 App“搜索”标签页中的这个链接。

它在行程名称旁边显示了一张缩略图。 在这种情况下，请将 `matchedTransitionSource` 修饰符添加到“链接”标签的子视图上。 具体操作如下。 这些行是由一个名为“Search Item View” 的自定义视图绘制的。 它使用了一个包含缩略图 和行程名称的 H 堆栈。

在这里，我将`matchedTransitionSource`修饰 符添加到了缩略图上， 而不是整个“搜索项目视图”。

我将命名空间作为属性 从周围的导航堆栈中传递进来。 现在，当我点击该行时， 详情页会从缩略图中缩放出来。

当我返回时，页面会再次缩放回缩略图。 我特别喜欢这个小细节。 它既有趣，又能将用户的视 线引导回最初点击的那一行。

今天我要介绍的第二种内置视图 是弹出视图（sheets）。 我将通过“愿望清单”App 中的弹出视图代码进行讲解。 这是“愿望清单”标签页的导航堆栈，其中包含 “is presenting add trip” 属性， 我将利用该属性来判断是否显示弹出视图。 栈内部是一个附带工具栏修饰符的滚动视图。

工具栏中包含这个加号按钮。

有了这样的结构，展示弹出视图只需两个步骤。 首先，工具栏中的按钮将 `isPresentingAddTrip` 属 性设置 为 `true`； 其次，弹出视图修饰符指定 在 `isPresenting` 状态下应显示的内容。 `Add Trip` 为 `true`。 这里的修饰符接受了该属性的绑定。 美元符号（$）就是这个含义。 Coal 稍后会详细讲解绑定， 但目前关键点在于， 这使得 SwiftUI 能将 `isPresenting:AddTrip` 属性重置为 `false`。 当用户在这些设置就位的情况下关闭弹出视图时。 当我点击按钮时， 弹出视图会从屏幕底部向上滑出。 当我点击关闭按钮时，它会滑回原位。

就像之前处理导航时一样， 我可以应用我的三步流程， 将其转换为`zoom` 过渡效果。 二。 首先，我在视图的属性中添加一个命名空间。 其次，我将 `navigationTransition` 修饰符添加到弹出 视图的内容中，并传入 `zoom` 参数。 最后，我将 `matchedTransitionSource` 修饰符添加到按钮的标签上。

现在，当我点击按钮时，弹出视图会逐渐淡出。

当我关闭弹出视图时， 它会以变形效果返回主界面。

这种动态效果有助于用户 将按钮与弹出视图建立关联。

SwiftUI 的滚动视图 还提供了内置的动态效果。 当用户在滚动视图上滑动时，它会平滑减速移动， 并在内容末端呈现友好的回弹效果。 这是“愿望清单”App 中用于 显示我已获得徽章的滚动视图。 滚动视图包含一个子视图， 用于显示用户可以滚动浏览的内容。 这里是一个由展示我所有徽章的图块组成的堆栈。 此外，滚动视图还可以接受一个参数， 用于指定其可滚动的方向。

例如，对于“愿望清单” App 中的徽章，我希望滚动视图 始终在徽章居中显示时停止滚动。 只需两个步骤，我就能让 SwiftUI 实现这一效果。 首先，我添加“scroll target” 行为修饰符，告知 SwiftUI 需对齐到某个视图处停止滚动。 然后，我添加“scroll target” 布局修饰符， 告知 SwiftUI 希望 哪个视图堆栈参与此行为。

设置完成后，现在当我滑动徽章时， 滚动视图总会停在徽章居中显示的位置。

现在可以更有趣了。 当这些徽章在视图中滚动进出时， 为它们增添一些奇思妙想会很有趣。 像“图书”和“体育” 这样的App就使用了这类动态效果。 它们是通过 `scrollTransition` 修饰符来实现的。

将该修饰符应用到你想要进行变换的视图上。 这里，这就是我的“已完成目标”磁贴。

我让过渡效果具有交互性， 使其响应手动滚动，并将方向设置为水平。

该修饰符接受一个闭包。 定义过渡效果。 SwiftUI 会将内容的代理 以及一个动画阶段传递给该闭包。

该阶段指定了过渡进程的进度： -1 表示已完全滚出屏幕（前缘）， 0 表示完全显示 在屏幕上， + 1 表示已完全 滚出屏幕（后缘）。

利用该阶段值来修改内容。

这里，当目标图块移出屏幕时，我会将其缩小，

并沿垂直轴 App 3D 旋转。

来看看效果。注意视图在边缘处似乎会环绕显示， 仿佛是圆形轮播图的一部分？ 这效果很棒。

今天要介绍的最后一种内置视图是 带有 SF Symbols 的图像 视图。

正如 Mojo 之前所说， SF Symbols 是一个包含 7000 多个符号的图标库。 此屏幕上没有重复的符号。

SF Symbols 旨 在与 San Francisco 无缝集成。 这是 Apple 平台上的系统字体。

Mac 版的 SF Symbols App 可 在 Apple 开发者网站上获取， 它允许你浏览图标库并 为你的使用场景找到合适的符号。 例如，“愿望清单”App 在其 活动列表中使用了一个勾号，

我便将该勾号添加到自己的App中。 我在 SF Symbols App 中向代码 添加了一个 SwiftUI 图片。 我对所需的符号（勾号，实心圆）进行控制点击， 然后选择“复制名称”。

接着在 Xcode 中， 我将名称粘贴到图片声明中，

勾号就出现了。 SwiftUI 提供了多种 为 SF Symbols 添加动画的效果。 我将分享三个示例。

使用无限循环效果来表示正在进行的操作， 例如在聊天中等待对方回复。 这些效果在激活期间会持续运行。 一些示例包括变量、颜色、缩放和呼吸效果。

要为 SF Symbols 添加其中一种效果， 请使用带 isActive 参数的 symbolEffect 修饰符。 只要该参数值为 true，效果就会运行。

使用离散效果来指示下载等事件。 正在完成。这些效果在事件发生时触发。 例如弹跳、脉冲和抖动效果。

要将其中一种效果添加到 SPH 符号上， 请使用带 value 参数的 symbol effect 修饰符。 只要该参数值发生变化，效果就会运行。

在用一个符号替换另一个符号时 （例如在圆圈中添加复选标记）， 请使用内容过渡效果。

要将此类效果添加到 SPH 符号中， 请使用“内容过渡”修饰符 并选择“符号效果”类型。 每当选定的符号发生变化时，过渡效果就会运行。

SF Symbols App 还 允许你尝试各种动画效果。

现在，我切换到“动画检查器”。 选择“呼吸”动画并设置为运行状态。 点击“播放”进行测试。 然后通过“复制”菜单复制该动画配置。

回到 Xcode 后， 将我在 SF Symbols App 中 配置好的选项粘贴到修饰符中。

符号便会进行“吸气”和“呼气”的动作。

SwiftUI 的内置 视图（如堆栈、片状视图、 滚动视图和图像）提供了多种内置效果。 自动添加修饰符， 以根据你的App需求微调这些效果。

接下来，我将介绍 SwiftUI 中的另一种动画类型：状态驱动动画。 我来解释一下。

之前， Leah 分享了 SwiftUI 视图 如何将数据映射到屏幕上的像素。 而 Cat 则展示了一个示例： 在愿望清单布局中，根据数据 模型中某个属性的值，视图会显示或隐藏。

以这种方式使用的数据被称为视图的状态。

以下是来自“愿望清单”App 的一个示例。 这是一个行程详情视图， 底部列出了我计划的活动。 这张图片上方悬浮着一段文字， 显示我已完成活动的百分比， 还有一条进度条—— 随着我完成更多活动，进度条会逐渐填满。

当我勾选一项活动时， SwiftUI 会更新相关的状态， 以记录该活动已完成。 依赖于该状态的视图会在状态 发生变化时自动更新。

目前，当我勾选一项活动时， 所有变化都是瞬间发生的。 我将让 SwiftUI 对此进行动画效果处理。 使用 `withAnimation` 函数即可实现。 具体方法如下。 这是显示该按钮的代码。 该按钮代表“行程详情”页面上的某项活动。

该按钮的操作会切换关联活动的 “已完成”状态。

我将此切换操作封装在 `withAnimation` 函数中。 这会告诉 SwiftUI， 对因封装状态 变化而产生的任何视图更新进行动画处理。 再次展示更新效果。 现在，当我完成一项活动时， 百分比文本会淡入淡出，进度条会填满， 活动颜色和勾号也会淡入淡出。

为了对这些变化添加动画效果， 我只需添加 `withAnimation` 即可。 其余部分会自动完成。

`withAnimation` 的 强大之处在于其简单性。 只需将状态变化包裹在该函数中， 视图中所有依赖该状态且可动画化的属性 都会自动App动画效果。 另一方面，App 中的某些部分 可能需要更精确的方式来描述这种变化。

我将专注模式 App 于“愿望清单”App 中的这个完成覆盖层。

在该App中，这三个视图— —完成百分比文本、进度条和副标题—— 都嵌入在一个自定义的 Activity 进度视图中。

为了专注模式，我将省略 几个样式修饰符以及副标题。 Activity 进度视图接受一个介 于 0 到 1 之间的完成度属性， 用于描述完成百分比。

一个带格式设置的文本视图用于显示完成百分比。

当完成度值为零时， 不透明度修饰符会隐藏该文本。

我使用圆角矩形来绘制这根柠檬绿色的进度条。

进度条的宽度是通过将常量条宽 乘以完成度值来设定的。

同样，当完成度值为零时， 不透明度修饰符会隐藏该视图。

现在，“愿望清单”的设计要求 在任何使用 ActivityProgressView 的地方都对其进行动画效果。 我可以使用动画修饰符来实现这一点。

通过将动画修饰符 App 到这个 VStack 上。 我告诉 SwiftUI， 每当传入的完成度值发生变化时， 就对这些视图进行动画效果。

这是目前的效果。 这与我使用 `withAnimation` 时得到的动画效果完全相同。

动画修饰符是 `withAnimation` 的替代方案。 当状态发生变化时。 当你希望状态变化的某些（ 而非全部）来源触发动画时， `withAnimation` 是 一个不错的选择。

另一方面，当你希望视图始终 进行动画效果，无论状态变化的来源为何， 则应使用动画修饰符。 无论是 `withAnimation` 还是动画修饰符， 都允许你调整动画的时长、速度、 加速度和反弹效果。 利用这一点，你可以更好地控制动画的质感。

例如，如果进度条在增加时能稍微弹跳一下， 会增添一丝庆祝的氛围。 我可以通过将 `.bouncy` 传递给动画修饰符来实现这一点。 效果如下所示。 绿色进度条在稳定到新值之前会微微振荡一下。

我甚至可以增加一些额外的弹跳效果。

看看现在会发生什么。 进度条呈现出有趣的弹跳效果。

但文字显示有些异常， 所以我将重新运行并暂停动画。

我添加的额外的 `.bouncy` 动画会先超过目标值， 然后回弹至原始值附近，最后才稳定下来。 再看数字部分。 这种回弹幅度足够大，导致 数字开始淡化回初始值。 我可以通过添加第二个动画 修饰符来解决这个问题。

我仅对文本视图添加了一个平滑动画。

现在，`.bouncy` 动画应用于整个视图堆栈， 但我仅针对文本子视图覆盖了该动画。

现在数字显示的问题已经解决了。 进度条在弹跳，但数字会平滑地淡入淡出。

既然这个问题已经解决了， 我将调整进度条，让它稍微弹回一点， 并为文本再添加一个运动效果。

带有数字文本参数的“内容过渡” 修饰符会告诉 SwiftUI， 当数字变化时使用一种特殊的计数器动画。 现在，数字会按顺序向上滚动， 从而吸引人们对变化的注意。

我特别喜欢这个效果。

总而言之， SwiftUI 视图将数据映射为像素。 状态驱动的动画让你能够控制 当数据或状态变化导致像素更新时的行为。

你可以通过将实际的状态 变化封装在宽度动画函数中， 或者为视图添加动画修饰符， 来指定这些动画的行为方式。

在继续之前， 我想简单介绍一下我用来控制 条形动画弹跳效果的可选参数。 这个可选参数控制着动画的时机。 我的意思是这样的：我 为条形动画使用了 `.bouncy` 效果。 该动画会在回弹前先超过目标位置， 然后才逐渐回弹。 在“值随时间变化”的图表中，

这是内置动画中最富趣味性的一种— —数值在稳定到最终水平前会先出现超调。

另一方面，“利落”动画会快速移动到最终值， 给人一种精准且专业的感觉。

图表显示，当数值达到最终水平时， 会出现一个明显的拐点。

`.smooth` 动画在 `.bouncy` 和 `.snappy` 之间找到了一个绝佳的平衡点。 它虽然迅速稳定下来， 但比 `.snappy` 动画显得更随意一些。

它的曲线更平缓， 接近最终数值的过程也更为渐进。 `.smooth` 是一种非常优秀的通用动画效果。 事实上，它是Apple所有平台上的默认动画。

最后，使用 `.spring` 动画 可以自定义弹簧的所有属性。 这让你能够进行精细控制。 调整 `bounciness` 参数可控制动画的活泼程度。 当 `bounciness` 值为 0.6 时， 数值会在最终稳定前多次振荡。 你还可以调整弹簧的持续时间， 甚至控制它与其他由弹簧 驱动的动画之间的交互方式。

通常情况下，弹簧的预设属性 `.bouncy`、 `.snappy` 或 `.smooth` ”中的一种就已足够，但知道在需要时 可以自行控制，这总是一件好事。

有关动画和 SwiftUI 底层工作原理的更多细节， 请参阅《探索 SwiftUI 动画》。 然后跳转到《使用弹簧进行动画制作》， 获取有关动画时序的技术和设计指导。

这两段视频均来自 UB 23。 我分享了“愿望清单” App 如何利用 SwiftUI 的内置视图 自动实现精美的运动效果，以及该 App 如何通过状态驱动动画进一步提升精美度。

最后，我将通过几个使用 SwiftUI 构建的自定义效果示例来总结。

这些示例目前尚未包含在“愿望清单”App 中， 但我会讲解如何添加它们。 通过这样的实验，是感受 SwiftUI 潜能的绝佳方式。

我的第一个示例是弹跳球。 这可以作为加载指示器使用。 使用`phaseAnimator`来实现这一效果。

该动画包含四个阶段。 首先，球体下落。

然后它“挤压”一下——这是一个技术术语。

球体再次膨胀，随后上升。

这个循环会不断重复。 枚举（enum）是定义阶段 animator各阶段的绝佳方式。 因此，本示例中定义的阶段为：下落、 压缩、膨胀和上升。 接着，为每个需要动画化的属性添加属性。 在本示例中，首先添加 y 偏移量属性。 返回每个阶段结束时的数值。 上升阶段结束时， 球的高度比原始位置高出 40 点。 在“压扁”阶段结束时， 球的坐标比原始位置低 5 点。

在其他两个阶段结束时，球位于原始位置。 接下来，为球的缩放比例添加一个属性。

在“压扁”阶段，球比正常形状略宽且略短。

其他时候，球保持圆形。

定义好各个阶段后， 将一个`phaseAnimator`添加到视图中。

通过将枚举类型设置为 case 可迭代， 并将所有 case 传递给`phaseAnimator`， 使animator遍历所有阶段。

SwiftUI 将调用animator的第一个闭包， 依次传递每个阶段。 即下沉、收缩、扩张和上升。

接下来，在此处绘制动画视图。 这就是圆形。然后 App 从阶段中读取参数的修饰符。

这里，我根据各阶段的 y 偏移量进行偏移，

并根据各阶段的缩放值进行缩放。

最后，在第二个闭包 中，定义每个阶段应使用的动画。 这里，我为“下沉”和“展开” 阶段使用了 easeIn 动画。 这类动画在开始时较慢，结束时较快。 而对于“挤压”和“上升”阶段， 我使用了 easeOut 动画。

以上就是在 SwiftUI 中构建阶段动画的四个步骤。 为每个动画属性定义阶段。 定义每个阶段结束时的值。 绘制视图并App动画效果， 最后为每个阶段指定动画。

要进一步了解`phaseAnimator`，请查看。 请参阅 Dub Dub 23 中的 《 SwiftUI 高级动画入门》。 我要分享的第二个自定义效果， 是用于庆祝用户在“愿望清单” 中获得徽章的过渡效果。

这个效果很酷，但速度很快，所以我再播放一次。

在 SwiftUI 中，当你添加或移除视图， 或者用一个视图替换另一个视图时， 可以App过渡效果。

这个徽章过渡效果主要分为两个步骤。 首先，编写代码将一个视图替换为另一个视图。 这里，我将先显示徽章的灰度版本， 然后将其替换为彩色版本。

创建一个组，将替换前后的图像放入该组中。 使用 if 语句来显示彩色图像。 如果徽章已获得，则显示彩色图像； 否则显示其灰度副本。 现在将 `earned` 属 性设置为 true， 就会将灰色徽章替换为彩色徽章。 第二步是为这次替换添加动画效果。

为此，向组中添加一个`transition` 修饰符。 这会告诉 SwiftUI， 当组内的视图被替换时，App 一个运动效果。 这里可以使用一些内置的过渡效果， 比如不透明度或缩放。 但要让徽章翻转，需要使用自定义过渡。

通过声明一个符合 transition 协议的结构 体来创建自定义过渡效果。

transition 协议仅有一个要求 ：必须包含一个 body 方法， 就像我之前分享的 `scrollTransition` 修饰符一样。 自定义过渡效果的 body 方法接受 一个 content 参数。 这是要添加或移除的视图的代理。 body 方法还接受一个 phase 参数， 用于指示视图是正在出现还是正 在消失。

在主体方法中， 以该阶段作为条件，对内容代理App特效。 该阶段有一个名为 isIdentity 的属性。 当视图可见时，该属性值为 true。 因此，要翻转徽章， 当阶段为 isIdentity 时， App 3D 旋转特效并设置为“无旋转”；

否则，根据视图是正在出现还是消失， 分别App正向或负向 180 度的旋转。

App 不透明度修饰符， 在翻转过程中逐渐隐藏或显示徽章。

定义好自定义过渡效果后， 将其实例传递给`transition` 修饰符。

现在，当我在 `withAnimation` 闭包中 块中切 换 `isEarned` 状态时， 灰色徽章会动画淡出，彩色徽章会动画淡入。 此时使用的是自定义翻转过渡效果。

若想进一步了解如何在 App 中创建自定义动态效果， 我推荐观看这段视频。 《使用 SwiftUI 创建自定义视觉 效果》（来自 W 24）。如需设计指导， 请查阅开发者网站（developer.apple.com ）上的 《人机界面指南》中的“动态”章节。 在考虑App中何处使用动态效果时， 请使用 SwiftUI。 其内置的视图和控件可为你提供多种动态效果。 自动添加修饰符来优化这些效果。 在你的 App

中，请使用状态驱动的动画来响应事件， 并引导用户的注意力聚焦于重要内容。 通过精心挑选的一组自定义动画， 让你的App脱颖而出。

感谢你参与本次 SwiftUI 动态效果的导览。 希望这能帮助你了解使用 SwiftUI 所能实现的可能性。