What’s new in SF Symbols 6
Design 进阶 20m

SF Symbols 6 新特性：新动画预设与 Magic Replace

What’s new in SF Symbols 6

2024年6月10日

在 Apple 官方观看视频

一句话判断

SF Symbols 6 新增 Wiggle、Rotate、Breathe 三种动画预设，升级 Replace 为 Magic Replace，改进 Variable Color 的循环播放，让你的图标动起来这件事变得前所未有地简单。

这场 Session 讲了什么

SF Symbols 是 Apple 的图标库，提供统一、可访问的符号系统。今年的更新集中在动画能力上，新增了三种通用动画预设。

Wiggle 让符号做短距离位移来吸引注意力，适合引导用户注意被忽略的界面元素。支持水平、垂直、顺时针/逆时针四个基础方向，以及阅读方向感知的前进/后退。很多符号有内置的推荐方向，比如纸飞机的默认方向就是它的朝向，你也可以用自定义角度覆盖。

Rotate 为符号添加旋转运动，模拟真实物体行为或作为进度指示器。支持整体旋转和按层旋转（By Layer），后者只旋转符号的部分内容——比如风扇只转叶片不转底座。

Breathe 让符号通过透明度和尺寸的平滑增减来表现”活着”的状态，适合传达正在进行的活动或状态变化。它和去年引入的 Pulse 看起来相似但有区别：Pulse 只改变透明度，Breathe 同时改变透明度和尺寸。

Magic Replace 是 Replace 动画的重大升级。当两个形状相关的符号切换时，斜线可以独立地绘制和擦除，徽章可以独立于基础符号出现、消失或替换。Magic Replace 是新的默认行为，但如果两个符号形状不相关，会自动降级为标准 Replace。

值得深挖的点

Magic Replace 的形状匹配逻辑

Magic Replace 的核心是”形状相关的符号之间的智能过渡”。它不是简单的淡入淡出，而是根据两个符号的几何关系来计算过渡路径。

斜线（slash）是一个典型案例。当你从 bell 切换到 bell.slash 时，斜线会自然地划过；反过来时斜线会收回。徽章（badge）同理——从 person 切换到 person.badge.plus，加号徽章独立于人物图形出现。

关键限制：只有形状相关的符号对才能触发 Magic Replace。如果两个符号没有几何关系，框架会自动降级到标准 Replace 动画（Off-Up/Off-Down 方向）。你仍然可以控制降级动画的方向。

如果你使用了自定义符号（通过 symbol components 创建），Magic Replace 也能工作——只需要在 SF Symbols 6 app 中重新导出符号，然后导入 Xcode 16 即可。这个兼容性处理做得很好，基本不需要改代码。

动画使用的克制原则

Session 里有一段值得反复品味的提醒：动画很好，但太多或在错误场景使用会让界面令人分心。每一个动画都应该回答一个问题——“我在用这个动画传达什么信息？”

Wiggle 用于”注意这里有个操作可以做”，Rotate 用于”这个任务正在进行中”，Breathe 用于”这个元素处于活跃状态”。如果这三个问题的答案都是”不”，那就不要加动画。Session 给的植物 app 示例很好地展示了这个原则——扫描按钮的 chevron wiggle 引导操作，计时器的水滴 breathe 表示进行中，天气预警的符号 rotate 提示动态变化，每一个都有明确目的。

代码片段

Wiggle 动画

// 基础用法：使用符号内置推荐方向
Image(systemName: "chevron.right")
    .symbolEffect(.wiggle)

// 自定义方向
Image(systemName: "paperplane")
    .symbolEffect(.wiggle.direction(.up))

// 自定义角度（适合方向不明确的符号）
Image(systemName: "paperplane")
    .symbolEffect(.wiggle.angle(.degrees(315)))

Rotate 和 Breathe 动画

// 整体旋转：适合表示进行中的任务
Image(systemName: "arrow.trianglehead.2.clockwise")
    .symbolEffect(.rotate)

// 按层旋转：只旋转部分内容（如风扇叶片）
Image(systemName: "desk.fan")
    .symbolEffect(.rotate.byLayer)

// Breathe：表示活跃状态
Image(systemName: "drop.fill")
    .symbolEffect(.breathe)

Magic Replace

// Magic Replace 是新的默认行为
// 两个形状相关的符号切换时自动使用
Image(systemName: hasNotification ? "bell.badge" : "bell")
    .symbolEffect(.replace)

// 如果符号不相关，自动降级为标准 Replace
// 可以控制降级时的方向
Image(systemName: isSelected ? "star.fill" : "person")
    .symbolEffect(.replace.downUp)

坑点：Magic Replace 对自定义符号需要用 SF Symbols 6 app 重新导出才能生效。如果你直接用旧版本的符号文件，Magic Replace 会降级为标准 Replace。重新导出并导入 Xcode 16 后无需修改代码。

Variable Color 闭合循环改进

// Variable Color：用颜色强度变化传达状态
// iOS 18 改进了闭合循环设计的重复播放
// 闭合循环符号现在可以无缝循环播放
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative)

最佳实践

升级到 SF Symbols 6 后，首先把所有自定义符号在 SF Symbols 6 app 中重新导出以支持 Magic Replace。审查现有界面中的静态图标，寻找可以用 Wiggle 替代 tooltip 提示的场景。用 Rotate 替代旋转进度条的自定义实现。用 Breathe 替代手动的 opacity 动画。但要遵循”每个动画必须回答’我在传达什么‘“的原则。对于 Variable Color，检查你的符号是否属于闭合循环设计，在 SF Symbols 6 app 中标注后可以获得更平滑的循环效果。

还有什么值得关注

  • SF Symbols 6 app 新增了符号标注功能，可以为自定义符号添加动画方向和分层信息
  • 库中新增了大量符号，覆盖更多使用场景
  • 所有新动画预设都兼容 VoiceOver 和辅助功能
WWDC 2024