SF Symbols 7 的新功能

大家好 我叫 Kelsey 是 Apple Design 团队的成员 今天很高兴与大家分享 SF Symbols 的所有新增更新 如果你还没有观看 请务必观看去年的 WWDC 讲座 “SF Symbols 6 的新功能” 因为这是快速上手 并为后续做好准备的重要资源 在开始之前 我们先快速了解一下 符号的设计和构造方式 这对于了解今年的一些新功能 至关重要 每个符号都经过精心设计和制作 以传达一种立即可识别的想法或感受 这些想法会转化为设计 从单个矢量点开始 创建开始成形的连续路径 通过每个矢量点和曲线 线条经过有意图地引导 定义了形状的特征和轮廓 每条曲线和每个角度都必须显得 具有深意、和谐均衡 并具有视觉传达力

让我们以这个箭头为例 符号不只是一条有可见轮廓的路径 因为这无法体现出那些 令符号真正出彩的细腻之处 相反 它由精心勾勒的形状构成 可以精确控制比例、 负空间和视重 这确保了清晰度、一致性 并呈现出更加考究 且有意图的视觉效果 有些形状使用两条朝向相反方向的 不同路径创建而成 这使得每条路径都能优化各自的外观 并且是定义这些路径 如何以动画呈现的重要部分 让我们来了解一下今年的新功能 了解这些细节是 如何融入我们的最新体验的 首先 我们要介绍 Draw 其中包括全新的动画和渲染预设 然后了解“魔术替换”的更新 今年它的功能变得更加强大 我们将介绍 Gradients 了解我们如何将它们 应用于各种符号和渲染模式 然后再深入探讨 如何为你自己的自定符号添加注解 最后 我们将以 API 的更新作为结束 要讲的内容很多 让我们开始吧 今年 我们很高兴将 Draw 引入 SF Symbols 这是以手写笔画为灵感的一套新功能 让符号能沿着定义的路径 富有表现力地绘制

在 Draw 中 我们引入了 两个新的动画预设 Draw On 用于以动画方式 将符号呈现在屏幕上 Draw Off 则用于以动画方式 让符号从屏幕上消失 这些预设利用了符号的图层结构 并可整合到你的体验中 以通过动画强调相关时刻 Draw On 和 Draw Off 支持 现有的播放选项 比如默认的“By Layer”选项 在这种模式下 每条路径 以交错的起始偏移量进行绘制 如果你想要实现更快、更直接的效果 你可以使用 Whole Symbol 制作动画 它会同时绘制所有图层 在这种模式下 每条绘制路径会同时开始和结束 你也可以利用 适用于 Draw 预设的播放选项 “Individually” 它可以逐一绘制每个图层 等待前一个图层完成后 再开始绘制下一个图层 这个选项适合用于希望呈现 更有意图的视觉效果的情况 将注意力引向单独的动作 我们将 Draw 设计得很灵活 允许每个符号定义各自的绘制方式 例如 风会从左到右绘制 来传达动态效果 而这个阿拉伯字符则会从右到左绘制 与它的书写方向保持一致 此外 一些符号可以从中心绘制 比如这个对称的符号 了解可用的绘制方向 在为你的自定符号 添加注解时会很有帮助 我们稍后将在讲座中谈到这一点 有些符号比较复杂 比如箭头 它们由两个表现为一体的形状组成 Draw 甚至支持这些组合形状 使箭头能够沿着它的路径移动 这样的动态效果可以 更好地传达符号的意义 并让你的 App 变得生动鲜活 我们已经介绍了 Draw 下面我们 将进入到“SF Symbols”App 并预览这些新动画 Draw On 和 Draw Off 都已添加到 检查器的动画列表中 我将先选择“Draw On” 这将显示我们前面讨论的 三个可用播放选项 与现有的动画预设一样 我可以直接在 App 中预览它们 Draw off 的效果类似 但添加了一个反向开关 这表示路径是应当 继续现有动态效果 沿着它的绘制方向消失 还是从末端反向消失 Draw 是通过动画 生动展现符号的绝佳方式 但它也可以被用来传达进度 如果你熟悉可变颜色 你可能还记得有些符号支持可变渲染 作为通过颜色 传达力度或进度的一种方式 为了获得更高的分辨率 我们在 渲染预设中引入了 Variable Draw Variable Draw 利用 参与图层上的新绘制注解

它在降低不透明的图层版本之上 以特定百分比渲染路径 这是直观呈现进度的好方法 例如下载进度 反映温度 甚至是表示 瑜伽课程的完成进度

让我们回到“SF Symbols”App 界面 查看渲染检查器的更新 你现在可以在这里 预览 Variable Draw 我们增强了现有的可变渲染选择器 以包含新的绘制选项

我将选择 Draw 参与的绘制图层 现在会对可变渲染做出反应 就像可变颜色一样

需要注意的是 符号可以选择 同时支持可变颜色和绘制 但在渲染时只能选择其中一种 在这些情况下 你可以使用默认选项 以使用系统首选的可变渲染模式 除了全新的 Draw 动画 我们还对“魔术替换”进行了增强 以使相关符号之间的 动画过渡更加流畅自然 “魔术替换”现在可以识别匹配外壳 以在两种状态之间提供无缝过渡 如果两个符号共享同一个外壳 系统将保留它们 同时替换有差异的图层 此外 我们还在“魔术替换”中 为受支持的符号引入了 Draw 用 Draw Off 来呈现 旧符号的退出效果 Draw On 来呈现新符号的进入动画 结合外壳匹配 系统将在参与符号上 混合搭配这些新功能 以提供最自然流畅 富有表现力的过渡 这些增强功能可通过动画检查器中 现有的“魔术替换”预设查看 如果你刚开始接触 “SF Symbols”App 可以在动画选择器中找到 这个预设以及其他预设 Gradients 通常用于增加绘画的 深度、维度及视觉趣味性 今年 我们很高兴宣布 SF Symbols 引入了 Gradients 在应用于符号时 Gradients 有助于营造一种 平面颜色不具备的光泽感 SF Symbols 中的新渐变渲染 可从单一源色生成平滑的线性渐变 支持用于系统颜色和自定颜色 这些渐变适用于所有渲染模式 也可以应用于你自己的自定符号

Gradients 在各种比例和尺寸下 都能呈现出色效果 但在较大的实例中尤为突出 在你想要让人注意到 符号深度和维度的地方 使用 Gradients 让我们回到“SF Symbols”App 预览这些 Gradients 我可以使用检查器中 渲染模式下方新增的开关 打开这些效果 在预览 Gradients 时 通过所选选项 颜色渐变会应用于 所有渲染模式 现在我们已经了解了所有这些 新功能用于系统符号的实际效果 我们来深入了解一下 如何为你的自定符号添加注解 以充分利用这些新功能 在这个部分 你将看到我们是如何 为自己的系统符号添加注解的 如果你想跟随操作 你可以随时将它们复制为自定符号 删除现有的引导点 并跟随我们添加注解 为了理解绘制注解的工作原理 请务必记住有关 如何绘制符号的详细信息 在这个 heart 示例中 符号是通过 两条单独的路径构造的 而 scribble.variable 则是 以可变宽度绘制的 这意味着我们不能只是 在路径上描边来构建动画 那么 Draw 实际上是 如何运作的呢？

Draw 动画依赖于 沿着所需绘制路径放置的 一组引导点 顾名思义 这些引导点有助于 沿着定义的路线引导路径 路径至少必须包含两个引导点 才能正确计算绘制路径 一个起点 用空心圆圈表示 以及一个终点 用实心圆圈表示 随着路径变得越来越复杂 它们可能需要额外的引导点 来帮助填补起点和终点之间的空白 指示多个绘制路径 甚至帮助引导沿路径的箭头 此外 某些符号可能需要 专门的引导点 以帮助系统正确计算它的绘制路径 例如 多个子路径可能 共享一个起点和一个终点 而路径中尖锐的弯曲需标记为角点 这里有很多内容 让我们进入到 “SF Symbols”App 中 来了解如何实际注解这些符号 以 line.diagonal 作为首个示例 我已使用 App 工具栏中的 可用控件 切换到图库视图 在动画列表中 选择 Draw On 或 Draw Off 时 Draw 工具栏会显示在画布顶部 通过选择最左边的按钮 我可以进入引导点模式 当我在画布上移动时 它会提供放置位置预览

将引导点移动到想要的位置后 只需点按一下即可放置引导点 然后我就可以放置下一个引导点了 你会注意到我放置的第一个引导点 自动变为起点 在我放置第二个引导点时 系统将确定终点和绘制方向 这个方向由箭头表示

现在 我可以尝试播放动画了

很好 我们的线 沿着定义的路径向上绘制

但如果要绘制的 是一个更复杂的符号呢？ Scribble 有多处转弯 为了帮助引导动画 在每个转弯处更好地过渡 我们需要沿路径放置更多的引导点 让我们进入到“SF Symbols”App 尝试复制这个注解

我已经放置了一些引导点 但我需要填补急转弯周围的空白 在这里必须精准放置 以确保路径可以在更复杂的形状中 平滑地进行动画处理 来看看效果吧

很好 现在动画在处理转弯时 会更加流畅自然 到目前为止 我们只用单个路径 对符号进行了注解 但是假如你的符号 有多条需要绘制的路径呢？ 符号中的每个路径 都可以使用同一组规则 来定义它特定的绘制路径和方向 如果你在跟随我一起添加注解 请使用 Line.3.Horizontal 尝试

我可以通过多种不同的方式 为这个符号添加注解 但我首先要为每条线添加注解 以便从左到右绘制 选择每个图层 为它添加注解

效果不错 但也许我会希望 中间这条线朝相反的方向绘制 我可以沿路径 拖动现有位置引导点以移动它们 你会注意到在我将起点拖过 另一个现有引导点时 箭头的方向会翻转 表示路径现在会朝相反方向绘制 这种方法非常适合 只朝一个方向绘制的符号 但有些符号从中心点 就具有隐含的方向性 对于这类符号 我们可以对它们 进行注解以双向绘制 wave.3.up 是一个很好的相关示例 首先 我可以将起点放在 路径的中心 然后在起点的两侧放置其他引导点 系统会自动识别它的双向性 并在起点两侧用箭头表示方向 在这种情况下 请务必确保 所有起点在各图层间对齐 以确保呈现对称效果 我可以启用吸附功能 来帮助我实现对齐

在我注解后面的两个路径时 你会注意到我的引导点 会同时吸附到路径的顶点 和其他图层上的现有引导点上

我将查看我的动画 确保所有路径 现在都从中心向外绘制 到现在 我们已经 为几个符号添加了注解 下面我们来了解一些 额外的配置选项 以根据你的喜好自定 Draw 动画 路径默认以圆角端点绘制 但你可能需要一些不同的样式 在这个示例中 你会注意到 动画在结尾处略显突兀 这是因为圆角端点 与实际绘制不完全一致 不过我们可以修复这个问题 通过使用起点上的上下文菜单 我们可以配置自适应端点 它将在动画期间 使用路径的端点样式 再来看看效果

看上去好多了 路径现在具有 与绘制样式相符的动画效果 需要注意的是 自适应端点 仅适用于沿单个方向绘制的符号 我们目前讨论过的所有符号 都是由绘制为 单个子路径的形状构成的 但并非所有符号都是这样设计的 由多个子路径构成的符号 也可以添加 Draw 注解 但机制略有不同 让我们给这个圆圈添加注解 在放置第一个引导点时 系统会检测到它跨越了两条子路径 并将它同时视为起点和终点 这由引导点后缘的胶囊形状表示 动画默认按顺时针方向绘制

如果我想让这个圆圈逆时针绘制 我可以随时通过 引导点的上下文菜单来切换方向 如果需要 我也可以随时沿着路径 添加额外的引导点 以获得更复杂的形状 你可能已经注意到了 这些类型的绘制仅支持单向动画 并且无法注解为双向绘制 对于同时具有绘制组件 和非绘制组件的符号 默认会出现非绘制组件 但在某些情况下 例如箭头 你可能需要额外添加一些注解 才能产生所需的结果 看看如何为这些符号添加注解

当然 符号中的线条组件 以顺时针方向绘制动画时 效果会非常好 但如果箭头本身 在绘制时附着在线条上 那就更好了 通过将箭头拖动到 已放置的引导点上 我可以创建一个附件 一个与引导点关联的非绘制元素 附加引导点指示附件将显示的位置 并开始跟随路径 创建附件后 你会注意到附加到 关联引导点的路径预览 要移除它 只需将路径拖离引导点 然后将它放到画布上的 任意其他位置 需要注意的是 要创建附件 需要将箭头绘制为 与基本组件分离的路径 要利用绘制附件 你可能需要查看和修改自定符号 以分离出箭头这样的元素 至此我们已经使用引导点自动放置 为不同的符号添加了注解 但并非所有符号的注解都那么简单 因此我们提供了一些高级选项 来帮助你注解那些更棘手的路径 放置引导点时 系统会帮助决定 引导点两侧的默认放置位置 但在某些情况下 默认位置对于你的符号 可能并非最佳位置

在这些情况下 你可以按下 option 键 然后沿路径向前或向后 拖动引导点的一端 而不影响它的关联点 对于具有大量重叠路径的符号 或直接彼此重叠的路径 从图层级别将引导点放置在 正确的子路径上可能具有挑战性 在这些情况下 你始终可以直接在图层列表中 选择子路径 强制将特定的引导点放到子路径上 在讲座前面介绍引导点主题时 我们谈到了一些特定类型的引导点 起点和终点 放置引导点时 系统会根据 沿路径的放置位置 来确定具体类型 与放置位置类似 你可能希望覆盖默认类型 你可以随时通过引导点上的 上下文菜单执行这个操作 在这里 你可以决定要将引导点 作为标准引导点还是充当终点 你也可以随时将引导点 重设为自动 让系统为你处理复杂的工作 你可能已经注意到这个列表中 还有另一个我们尚未介绍的 引导点类型 即角点 在特别尖锐的拐角处绘制路径时 系统需要以特殊方式处理这些情况 这可以通过将引导点 指定为角点来实现 所有其他引导点类型 都是通过关联要绘制的路径 两侧的两个点来工作的 角点的独特之处在于 它们关联路径同一侧的两个点 并用菱形表示 根据符号的设计 你可能需要反复添加注解 以进行试错 如果发现自己需要重新开始 只需使用各图层的上下文菜单中的 重置引导点选项即可 放置引导点没有唯一正确的方法 尝试不同的放置位置来找到 最适合你的符号的方式 请记住 符号支持 九种不同的粗细和三种比例 务必确保你的自定符号 在所有配置中 都能正确添加动画效果 这一点至关重要 但别担心 你只需要为 其中三个点添加注解 系统会处理其余部分 为自定符号添加注解时 务必先注解 Regular 粗细 这种样式是基本注解 也是唯一可以添加和删除 引导点的粗细样式

系统会自动将位置引导点插入到 其他两个模板粗细样式 即 Ultralight 和 Black

请注意 Ultralight 和 Black 样式中的每一个引导点 都对应着 Regular 粗细中的 一个原始引导点

如果我在 Regular 粗细中 移动引导点 Ultralight 和 Black 样式中 对应的引导点也会移动

由于符号可以通过模板 在不同粗细之间进行插值 因此务必确保关联引导点 在 Regular、Ultralight 和 Black 样式中的顺序一致 让我们看看引导点当前的位置 它们总体看上去不错 但在 Black 粗细中 有几个引导点似乎不太对劲 我们可以轻松修复这些引导点 但我们需要确保它们的顺序正确 为此 我们可以打开引导点编号 这会在每个引导点旁边 显示唯一编号 以根据 Regular 粗细中的相关顺序 指示引导点应出现的顺序 你会注意到 6 号、7 号和 8 号的 顺序不对 我可以将它们到新位置来快速修复 重写的引导点以橙色表示 并帮助确保在所有配置中 正确绘制符号 这样 我们已经完全注解了 符号的 Draw 只需几个步骤 你就可以成为 自己符号的动画师

现在符号已添加注解 我们可以决定是否 将它们加入 Variable Draw

在设置弹出窗口中 打开可变渲染开关后 你使用图层列表中的 Variable Draw 按钮激活一个图层 而且你随时可以使用 我们在讲座前面部分介绍的 可变渲染滑块进行预览 在进行这项选择时 务必仔细查看每个图层 来确定哪些图层应当参与 在温度计示例中 我们只启用了一个图层 这使得计量表部分能够传达进度 而不会影响其他绘制图层 以上就是关于为自定符号 添加 Draw 注解的介绍 我们已经介绍了 SF Symbols 7 的所有新功能 接下来了解一下 API 的更新 以便直接在代码中利用这些新功能 对于我们的新动画预设 你可以 按照符号动画的现有模式 使用 symbolEffect 修饰符 来应用 Draw 在 SwiftUI 中 当 isHidden 的值更新时 符号将先应用动画 先消失然后再出现 在 AppKit 和 UIKit 中 你可分别指定 Draw On 和 Draw Off 以触发每个动画 和其他符号效果一样 如果你想覆盖“By Layer”默认选项 你可以随时在线条中 直接设置所需的播放模式

要利用 Variable Draw 在相关部分指定 variableValueMode 并且确保在配置符号时 设置所需的 variableValue 最后 为了充分利用渐变渲染 使用 SwiftUI View 修饰符或通过 UIKit 和 AppKit 的 symbolConfiguration 选项将 colorRenderingMode 设为 gradient 只需在代码中添加一些简单内容 你可以充分利用 SF Symbols 7 的强大功能 如有必要 你可以随时在 “SF Symbols”App 中直接使用 “拷贝代码”按钮 今天我们介绍了很多内容 接下来我们来了解一些 充分利用这些新功能的后续步骤

如果你还没有下载新的 SF Symbols 7 Beta 版 请立即下载 以查看符号库的更新、 预览 Gradients 并体验 Draw 的全部功能 查看你的自定绘制 确保它们的设计能够利用 所有可用的注解选项 浏览我们的框架文档 进一步了解有关直接在代码中 利用这些新功能的更多详情 以上就是 SF Symbols 7 的新增功能 我们非常期待看到你 使用这些新功能创造的种种精彩