WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in SF Symbols 5

What's new in SF Symbols 5

SF SymbolsDesignSwiftUI
观看原视频

Highlight

SF Symbols 5 引入了符号动画系统，包含 7 种可配置动画预设（Appear、Disappear、Bounce、Scale、Pulse、Variable Color、Replace），适用于所有符号、所有尺寸和所有渲染模式。开发者可以用一行代码让界面图标动起来，传递更丰富的交互反馈。

核心内容

SF Symbols 的演进路线

2019 年 SF Symbols 刚推出时只有单色模式。2021 年增加了 Hierarchical、Palette、Multicolor 三种渲染模式。2022 年引入 Variable Color，让符号可以表达强度变化。

2023 年的 SF Symbols 5 带来了动画能力。所有符号、所有尺寸、所有渲染模式都支持动画。

（02:03）动画预设是可配置的，每个都有独特的视觉特征。

动画的两个核心概念

层级动画 vs 整体动画

（02:32）每个符号由统一的层级结构定义。默认情况下，符号按层级动画——每层依次运动，动作清晰精确。也可以选择整体动画，让所有层同时移动。

空间平面

（03:17）动画利用三个空间平面创造深度感：

  • 中间平面：三维空间的中心，是定位和移动的参考点
  • 前平面：最靠近观察者，符号看起来更大
  • 后平面：最远离观察者，符号看起来更小

符号根据方向性在这些平面之间移动，可以上下移动，也可以完全移出视线。

七种动画预设

Appear / Disappear

（04:55）Appear 用于符号首次出现在界面时，元素逐渐显现，吸引注意力。Disappear 用于符号从界面移除时，提供视觉反馈，告知用户元素已被删除。

Bounce

（05:28）快速、弹性的运动，模拟物体弹跳。三种用途：

  1. 提供交互反馈——告知用户操作成功
  2. 强化符号概念——让符号更活泼
  3. 创造能量感——让符号更有互动性

（06:09）亮度滑块的例子：滑块拉到最右端时，sun.max 符号执行 Bounce 动画，告知用户已达到最大亮度。

Scale

（06:39）通过改变符号大小提供视觉反馈。Scale Up 短暂放大后恢复，确认交互被识别。Scale Down 模拟物理按钮被按下的感觉。

（07:42）Hover 文件夹时 Scale Up 放大并保持，移开后恢复。Scale 是有状态的——放大状态持续到效果被移除。

Bounce vs Scale 的选择

（08:07）Bounce 表示”动作发生了”或”需要采取行动”。Scale 表示”被选中了”或”获得焦点”。

Pulse

（08:33）通过改变透明度传达持续活动。可以作用于整个符号，也可以只作用于特定层。

（08:56）屏幕共享图标：整体 Pulse 可以传达活动状态，但只让代表屏幕的那一层 Pulse，信息更精确。

Variable Color

（09:38）Variable Color 今年也加入了动画库，有两种模式：

  • Cumulative：逐层高亮，保留之前的状态。适合表示 Wi-Fi 连接成功
  • Iterative：逐层高亮，一次只亮一层。适合表示 Wi-Fi 搜索网络

（10:30）Iterative 配合 reversing 选项，高亮层会反向回到起点，然后重新开始，直到动作中断。

Replace

（10:55）一个符号替换为另一个，传达状态变化或功能切换。

方向性选项：

  • Down/Up：旧符号向下消失，新符号向上出现。通常跟随用户输入
  • Up/Up：旧符号向上消失，新符号继续向上出现。创造前进感

（12:20）播放/暂停按钮：点击 play 符号立即过渡为 pause 符号，表示下一个可用操作。

（12:38）文本编辑工具栏：选中文字后，undo/redo/paste 符号替换为 cut/copy 符号，提示用户当前可用的操作。

详细内容

在 SwiftUI 中使用符号动画

SF Symbols 5 的动画通过 SwiftUI 的 symbolEffect 修饰符使用：

// Bounce 动画
Image(systemName: "checkmark.circle.fill")
    .symbolEffect(.bounce)

// Scale 动画
Image(systemName: "folder.fill")
    .symbolEffect(.scale.up)

// Pulse 动画
Image(systemName: "shared.with.you")
    .symbolEffect(.pulse)

// Variable Color 动画
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative)

// Replace 动画
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
    .symbolEffect(.replace.downUp)

关键点：

  • .symbolEffect() 接收动画预设类型
  • .bounce、.scale、.pulse 等是预设枚举值
  • Replace 动画在符号切换时自动触发
  • 所有动画支持自定义配置选项

动画配置选项

// 整体动画（默认是按层级）
Image(systemName: "bell.fill")
    .symbolEffect(.bounce.wholeSymbol)

// 自定义速度
Image(systemName: "star.fill")
    .symbolEffect(.pulse.speed(0.5))

// Variable Color 带 reversing
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative.reversing)

关键点：

  • .wholeSymbol 让所有层同时动画
  • .speed() 控制动画速度
  • .reversing 让 Variable Color 反向循环

为动画设计自定义符号

（13:37）自定义符号要支持动画，需要用整体形状绘制，并合理使用 Erase 层。

绘制步骤：

  1. 用完全封闭的路径定义符号主体
  2. 绘制需要独立动画的部分作为单独层
  3. 用 Erase 层创建镂空效果
  4. 在 SF Symbols app 中标注 Draw 和 Erase 层

（16:31）有 Erase 层的符号动画更流畅，形状之间有连续性和凝聚力。没有 Erase 层的符号静态时可能看起来正常，但动起来会失去深度和活力。

新增符号

（17:36）SF Symbols 5 新增了超过 700 个符号，总数超过 5000 个：

  • 汽车类：方向盘、汽车座椅、坐姿人物
  • 游戏类：街机主机、摇杆、各种按钮
  • EV 充电：不同类型的电动汽车插头
  • 天气类：月出、月落、彩虹
  • 日常物品：大量新对象符号

核心启发

为按钮操作添加 Bounce 反馈

  • 做什么：用户完成关键操作（保存、发送、确认）时，让相关图标执行 Bounce 动画
  • 为什么值得做：明确的视觉反馈让用户感知操作已被系统接收，减少重复点击
  • 怎么开始：在按钮的 action 闭包中触发 .symbolEffect(.bounce)

用 Pulse 表示后台活动状态

  • 做什么：上传、同步、录音等持续进行中状态，用 Pulse 动画标记
  • 为什么值得做：用户扫一眼就知道哪些功能还在工作，不需要打开应用检查
  • 怎么开始：为状态图标添加 .symbolEffect(.pulse)，活动结束时移除

用 Replace 动画切换工具栏状态

  • 做什么：根据当前选中内容动态切换工具栏图标，配合 Replace 动画过渡
  • 为什么值得做：平滑的符号替换让用户理解状态变化，比直接切换更自然
  • 怎么开始：条件渲染不同符号，SwiftUI 自动应用 Replace 过渡动画

为自定义图标启用动画支持

  • 做什么：用整体形状法重新绘制应用中的关键自定义图标，添加 Erase 层
  • 为什么值得做：自定义图标也能享受 SF Symbols 的动画系统，品牌一致性更强
  • 怎么开始：在 SF Symbols app 中导入 SVG，标注层级，测试各种动画预设

关联 Session

评论

GitHub Issues · utterances