Create animated symbols
System & Services 进阶 20m

创建动画符号

Create animated symbols

2023年6月5日

在 Apple 官方观看视频

一句话判断

SF Symbols 5 带来了动画能力，自定义符号终于可以”动起来”了。

这场 Session 讲了什么

SF Symbols 5 引入了四种全新的动画效果：Bounce（弹跳）、Variable Color（变量颜色）、Pulse（脉冲）和 Replace（替换）。这些动画效果与系统内置符号完美集成，同时也支持自定义符号。SF Symbols app 新增了 Animation Inspector 标签页，开发者可以在其中预览和调试所有动画效果，还能复制对应的 Swift/Objective-C API 名称。

对于自定义符号，有几个关键更新。首先是 Motion Groups 的概念——通过在标注模式下将多个图层编组，你可以控制动画时各层是独立运动还是作为整体移动。其次是 Pulse 图层标注，允许你指定哪些图层参与脉冲效果。这些功能让自定义符号在动画表现上与系统符号保持一致。

另一个亮点是新的”基于现有符号创建变体”的功能。开发者可以基于系统中已有的设计模式（如圆形边框、斜线修饰符、徽章等）来创建自己的符号变体，确保自定义符号与系统符号在视觉上保持一致性。

值得深挖的点

动画效果的可配置性是重点。以 Bounce 为例，你可以控制弹跳方向（上或下）以及是否按图层分别动画。Variable Color 支持 Cumulative（逐层累积后一起消失）和 Iterative（逐个激活）两种模式，还可以配合 Reversing 选项创造不同的视觉效果。

图层分组是一个需要仔细思考的设计决策。以 Session 中的魔方符号为例，魔方的不同面不应该独立移动，因此需要将所有层编为一组。但其他符号可能需要某些部分独立动画。你需要在 SF Symbols app 中逐一检查每个自定义符号的动画行为。

代码片段

// 弹跳动画 - 默认设置
Image(systemName: "speaker.wave.3")
    .symbolEffect(.bounce)

// 弹跳动画 - 自定义方向和图层行为
Image(systemName: "speaker.wave.3")
    .symbolEffect(.bounce, options: .bounce.down.byLayer)

// 变量颜色动画
Image(systemName: "wifi")
    .symbolEffect(.variableColor.cumulative)

// 脉冲动画
Image(systemName: "pause.circle")
    .symbolEffect(.pulse)

最佳实践

  • 使用 SF Symbols app 5.0 版本导出自定义符号，确保包含 Motion 信息
  • 导出时选择 Xcode 15 格式，以获得完整的动画支持
  • 为每个自定义符号设置合适的图层分组，控制动画行为
  • 为需要脉冲效果的符号标记特定图层
  • 在不同渲染模式下预览动画效果

还有什么值得关注

  • 基于现有系统符号的设计模式创建变体符号，保持视觉一致性
  • Session 中提到的 Universal Render Pipeline 与 Foveated Rendering 的配合
  • 使用 Animation Inspector 预览后一键复制 API 名称，提升开发效率
  • 旧版本导出的符号缺少 Motion 信息，需要重新导出才能支持新动画
WWDC 2023