创建带有动画效果的符号

♪ ♪

Paul：大家好 我是 Paul 负责 SF Symbols App 的开发工作 自推出以来 SF Symbols 一直是 Apple 平台 外观和使用体验支持的 重要组成部分

符号具有一致性： Apple 平台内置了数千个符号 这些符号有着共同的 视觉设计和动画效果 它们可以使 App 和界面 立刻给人一种熟悉的感觉 符号具有定制性： 如果内置符号不能满足你的需求 你可以使用 SF Symbols App 创建自己的符号 与系统内置符号一样 这些符号也具有强大功能

当然 符号还具有很强的表现力 符号可以在很小的屏幕空间内 传达复杂的概念 它们能够以超越语言的方式 传达思想 它们还能让你的 App 更有活力、更有趣

现在 有了 SF Symbols 5 符号将通过动画 获得全新维度的表现力 SF Symbols App 将帮助你 探索这一全新维度 今天 我们将介绍如何 使用 SF Symbols App 测试新的动画效果 如何创建新的自定义符号和 更新现有的自定义符号 让它们能够完美地与 所有新的动画功能配合使用 如何根据你自己的自定义符号 创建熟悉和可识别的符号 最后 如何确保你 在 App 中使用的符号 即使在比较旧的平台上仍保持美观 那么 让我们启动 SF Symbols App 一起看看示例吧

我们先来看看边栏中的 一个新选项卡 这是动画查看器 功能如其名 你可以使用它来预览新的动画效果 让我们切换到画廊视图 这样查看起来会更方便 我们选择一个内置的 扬声器符号来进行实验

你可以从这个弹出按钮中 选择任意一种新的动画效果 弹跳动画就不错 若点击预览按钮 你可以看到动画在主画廊视图、 下方的符号行 以及边栏的预览区域中播放 也就是说 你可以在所有不同的 渲染模式下看到动画 在预览按钮周围 你可以看到 用于配置动画的控件 你可以选择一些选项 例如符号是向上还是向下弹跳 以及希望符号的各层分别弹跳 还是整个符号同时弹跳

当我更改其中一些设置时 预览区域下的标签 会从“Automatic” 变为“Modified” 当你为 App 编写代码时 每种动画类型都处于默认设置 启动 SF Symbols App 时 这些默认设置会自动为你预选 你将在此处看到 “Automatic”字样 当你切换到默认设置以外的设置时 你会看到“Modified”字样 让你知道你已更改了设置 你可以点击这里出现的重置按钮 恢复默认设置

找到想要的配置后 如果想直接在代码中指定这套配置 你可以点击这个按钮 复制 Swift 或 Objective-C API 所需的效果名称 让我们继续看新的动画效果

这个扬声器符号还支持颜色变化

那么让我们尝试一下颜色变化动画

选择 Cumulative 选项时 颜色变化层会层层激活 然后一起淡出 当我们选择 Iterative 时 则一次只激活一个图层 我们还可以打开 Reversing 选项 看看这种配置 如何产生不同的感觉

以上就是新动画效果的简要介绍 我们一直在使用系统提供的 SF Symbols 进行动画效果预览 但正如从前一样 内置符号其实并非全部 如果你的 App 中有自定义符号 那么有了 SF Symbols App 它们也要沾上动画效果的光了 这里是一些去年我做的自定义符号 当时我正在开发一款 App 希望帮助我和女儿练习魔方还原 今年 我开始练习魔方速拧 所以我想更新一下 App 帮助我记录还原一个魔方 需要多长时间 我们先看看去年的自定义符号 为动画效果的设置做一下准备

这是我们去年制作的 3 x 3 魔方符号 我们将其注释为分层渲染 和多色渲染 并将正面分成不同的图层 以便应用颜色变化

由于我的符号设置了颜色变化 因此它支持开箱即用的 颜色变化动画

我可以将其用于加载指示器

让我们看看其他的动画

计时器暂停时 Pulse 动画则非常适合 但是当我点击预览按钮时 即使我设置了 By Layer 整个符号还是在跳动 这里的注释列表中有一个新控件 你在使用 By Layer 设置时 可以指定应该跳动的图层 如果我的符号中 没有任何图层被标记 那么整个符号都会跳动 因此 我们将构成正面的 所有图层都标记为跳动图层 并再次预览 这就是我们想要的动画效果 我的计时器暂停时 效果会很不错 其他所有动画都使用了动作 所以我们接下来要检验这个功能 如果你有从 SF Symbols App 第 4 版 或更早版本导出的符号 或者如果有为了与 Xcode 14 兼容而导出的符号 这些符号将不包含动作信息 并且它们在你的 App 中将始终 作为一个完整的符号移动 但是 让我们看看当我从 SF Symbols App 的第 5 版 导出到 Xcode 15 中使用 又会发生什么

我将回到 Bounce 动画 并用我的魔方符号播放该动画

整个过程包含了太多的动作！ 默认情况下 选择 By Layer 时 符号中的每一层 都会独立移动 我很喜欢符号动画 但这可能有点过头了 我们可以通过注释中的 一项新功能来解决这个问题 你可以创建图层组 这些图层组可以将其所有子图层 一起制作成动画 我将选择构成正面的所有图层 并将它们添加到新的图层组中

在图层组内 所有图层仍然保留 自己的注释和设置 但现在所有图层都一起运动

现在动作减少了 但是 让魔方的不同部分分开运动 看起来还是有点奇怪

因此 我们撤销刚才的操作 并选择符号的所有图层 将其全部添加到一个组中

这符合这个符号的要旨 立方体的不同面其实 并不会单独移动 而且在这个图中 各个面 也并不处在不同的深度层次上 将所有这些层组合在一起 即使代码按层进行请求 也能够确保立方体 始终作为一个整体产生动画效果 最后 你需要逐个查看自定义符号 并决定适合每个符号的动作组

我在前面提到 符号的优势之一 是一致性和熟悉感 这是你在使用自定义符号时 需要记住的一个重要概念 这是我去年设计的 另一个自定义符号 这是一个魔方 但它被放在 一个实心的圆形之上 这种圆形外壳是 SF Symbols 中 常见的设计元素 内置库中有很多符号 都使用了类似的圆形处理 比如这个视频符号 此外 SF Symbols 中还有许多 其他可重复使用的设计模式 如圆形边框 再如斜线或角标等修饰符 这些处理方式的一致性是 SF Symbols 易于识别和 具有熟悉感的关键因素之一 自定义符号应尽量 也采用这些处理方式 以获得这种熟悉性的所有好处 那么 如何让我的自定义符号 与系统保持一致呢？ 我可以在系统符号库中 查找类似符号的示例 并以此为基础绘制新符号 我还可以查看该符号 在每种不同的渲染模式下 是如何注释的 在分图层动画中是如何移动的 是如何跳动的 以及它的颜色变化设置 在外壳中是如何变化的

然后 我还可以为 其他常见的设计模式 如其他外壳、斜线或角标 做同样的设置 但要记住的设置太多了 与其记这些东西 我还不如用这些脑容量 记忆还原魔方顶层的最快方法 SF Symbols 的目标之一 一直是帮助自定义符号 尽可能轻松地 与系统提供的符号相匹配 从而提供一致、熟悉的体验 因此 今年我们非常高兴地推出了 符号组件 符号组件提供的图样和动画效果 在外观和感觉上都与 系统提供的 SF Symbol 相似 将你的自定义符号 与符号组件相结合 你将会得到一个开箱即用的新符号 这个符号在外观和感觉上 与其他内置符号是一样的 我们试试将一些组件 与我心爱的魔方符号结合起来 看看这个过程是怎么实现的 首先 调出自定义符号的右键菜单 并选择 Combine Symbol with Component 在弹出的表单中 我可以查看组件库 并选择我想要使用的组件 有外壳、 角标和斜杠组件 我们先选择 slash、badges.plus、 circle 和 circle.fill

效果如图 可以看到 这些新符号已经出现 在我的自定义符号库中 效果看起来已经很棒了 加号角标已正确着色为不同颜色 斜线的动画也与后面的魔方分开

.circle.fill 版本已经设置为 在分层模式下使用主图层 但在单色模式下 将魔方变为擦除效果 它甚至保留了我的颜色变化设置

在基本符号的外观和设计基础上 如果你还需要进行一些调整 可以在注释控件 通常所在的边栏中进行调整

例如 你可能会想调整角标的位置 以避免出现视觉假象 甚至你可能想将其 移动到符号的另一侧

或者为了确保符号被足够覆盖 你可能会想改变斜线的长度

现在 你还需要确保 新符号在符号支持的 所有不同比例和粗细下 看起来都效果完美 有 3 种比例和 9 种粗细 总共有 27 种不同的变化 但好消息是 符号组件由变化模板提供支持 可替你完成大部分工作

SF Symbols 3 中引入了可变模板 你只需在小比例下提供三张图纸 极细体、常规体和黑体各一张 然后 只要你在每张图纸中 使用的贝塞尔路径是兼容的 系统就可以将你的图纸混合在一起 创建其余 24 种可能的变体 要我说 用 3 个符号的工夫获得 27 个符号是相当划算的 符号组件的工作方式相同： 你可以控制小 + 极细体、 小 + 常规体 以及小 + 黑体三种变体 在画廊视图的顶部有一组预览图 这样你就可以看到 三种不同的粗细的符号 并在它们之间快速切换 在许多情况下 你只需要 对常规体粗细进行调整 就像我将斜线加长一样 而这些变化也会延续到 极细体和黑体设置中 但如果你遇到诸如 外壳重叠之类的问题 或者你的符号形状 需要不同的对齐方式 你可以点击极细体或黑体中的 Override 复选框 然后单独进行调整 我把封闭立方体的比例调低一些 给它更多的喘息空间 在自动创建中粗体等 介于两者之间的粗细度时 系统会将这些新的调整考虑在内 事实上 系统在幕后为这样的外壳 做了更多的工作 当基本符号按比例缩小 以适合外壳时 系统会使用基本符号的可变模板 应用粗细度补偿 随着符号尺寸的减小 而增加其粗细和厚度； 这有助于使其与较大的无外壳版本 及其围绕该图案的圆圈 保持视觉上的一致 与符号组件的许多其他部分一样 你可以对被包围符号的粗细 进行额外的微调 以获得你想要的最终视觉结果 这就是符号组件的强大之处 符号组件是在现有 自定义符号的基础上 创建新符号的一种 快速而简便的方法 其行为和艺术效果 与系统提供的 SF Symbols 库相匹配 请记住 符号组件需要与 由可变模板创建的自定义符号 一起使用 以便在需要时应用粗细补偿 这也意味着 当与组件结合时 可变模板中可能存在的 对单个变体的任何重写都将被忽略 最后请注意 你无法从使用 组件创建的符号中 导出可编辑模板 符号组件的设计目的是 在你进行调整后为你处理绘图 因此你不需要手动编辑绘图

今年 SF Symbols App 中 提供了超过 40 个组件

结束前 你还需要 了解一个重要方面 采用新功能时 请务必记住 许多使用你的 App 的用户 使用的是旧平台 他们也应该获得 出色的 App 使用体验 我们重新设计了 SF Symbols App 的体验 帮助你确保符号在 App 支持的 所有平台上 即使是旧平台 都能按照你的要求显示和运行 当你想修改符号的形状和结构 而导出可编辑模板时 现在看到会是线框视图 而非之前在模板中显示的填充形状 为动作而优化的符号 通常包含一些形状 用于在渲染过程中 擦除其他形状的部分 例如感叹号角标周围的额外边框 我们发现 在绘制阶段最好将 注意力集中在组成符号的形状上 等到在 App 中注释符号时 再标记哪些形状绘制颜色 哪些形状要设置擦除效果 模板中的线框样式 可以帮助你实现这一点

导出模板时 我们还有一个 新的兼容性选择器 默认情况下 你将获得最新和最好的符号 其中许多符号已为动作效果 而重新绘制 但如果你的使用目标是旧平台 SF Symbols App 将为你提供 更适合该平台的模板 例如 如果你使用的是 SF Symbols 3 对应 iOS 15 和 macOS Monterey 你将获得一个更简单的绘图 但该绘图并未针对动作进行优化 因为 SF Symbols 3 并未完全 支持我们用于动作的图层结构 如果你的目标是 SF Symbols 2 对应 iOS 14 和 macOS Big Sur 系统会自动为你提供一个静态模板 因为可变模板是 在 SF Symbols 3 中引入的 当你注释自定义符号时 情况是一样的 默认情况下 你可以使用 App 提供的所有注释功能 但你可以将符号 设置为针对特定平台 App 将帮助确保你的符号 符合平台兼容要求 例如 如果我选择 SF Symbols 3 或更早版本 我将无法编辑符号的单色注释 因为单色注释 在 SF Symbols 4 之前 都无法自定义 最后 如果你打算将符号 导出到 Xcode 中使用 只需告诉 App 你使用的 Xcode 版本 该 App 将选择 最佳文件格式进行导出 并确保该文件编译到 应用于旧平台的 App 时 仍能够正常工作 这就是使用 SF Symbols App 创建可用于动画的符号 的简单快捷之处 有了动画查看器、新注释功能、 符号组件和兼容性检查 只需点击几下即可完成操作 这跟我学习魔方速拧的经历很像 有很多角度需要考虑 有很多不同的活动部件 似乎有一大堆信息需要处理 但有了正确的工具 你会惊讶于完成速度之快…… 一切都是水到渠成 感谢你的观看 ♪ ♪