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

What's new in SF Symbols 6

WWDC 2024
观看原视频

Highlight

SF Symbols 6 新增 Wiggle、Rotate、Breathe 三种通用动画预设，升级 Replace 为 Magic Replace，改进 Variable Color 的闭环循环播放，并为自定义符号提供了完整的图层标注工具链。

核心内容

界面中的图标通常是静态的。用户扫过一屏信息时，一个不动的图标很难引起注意——你可能需要加 tooltip、改颜色、或者写额外的提示文字。SF Symbols 6 试图用动画解决这个问题：给图标一个轻量、有语义的运动，让它自己”说话”。

今年新增了三种通用动画预设。Wiggle 让符号短距离位移来吸引视线，适合引导用户注意被忽略的操作按钮。Rotate 添加旋转运动，可以模拟真实物体行为（风扇转动），也可以充当进度指示器。Breathe 通过透明度和尺寸的平滑增减，让符号呈现”活着”的状态，适合表达正在进行的录制或计时。

Replace 动画也迎来了重大升级。Magic Replace 能识别两个形状相关的符号，在切换时让斜线独立绘制和擦除、让徽章独立于基础符号出现或消失。当两个符号形状无关时，自动降级为标准 Replace。Variable Color 方面，闭合循环设计的符号现在可以无缝循环播放，不再出现跳帧。

详细内容

Wiggle（01:41）

Wiggle 用于强调变化或引导注意。支持四个基础方向：水平（左/右）、垂直（上/下）、顺时针、逆时针。还有阅读方向感知的前进/后退方向。很多符号有内置的推荐方向——纸飞机默认朝自己的朝向摆动。如果默认方向不对，可以用自定义角度覆盖，比如 315 度让纸飞机看起来要起飞（02:56）。

Image(systemName: "paperplane")
    .symbolEffect(.wiggle)

关键点：

  • .wiggle 默认使用符号内置的推荐方向
  • 可传入方向参数如 .wiggle.forward 或 .wiggle.up 来自定义
  • 还可指定自定义角度如 .wiggle(angle: .degrees(315))

Rotate（03:19）

Rotate 为符号添加旋转运动。整体旋转适合进度指示场景；By Layer 旋转只转符号的部分内容——比如风扇只转叶片不转底座。自定义符号需要在 SF Symbols 6 app 中标注哪些图层参与旋转，并设置旋转锚点（13:24）。

Image(systemName: "deskfan")
    .symbolEffect(.rotate)

关键点：

  • .rotate 默认整体旋转符号
  • By Layer 旋转需要在 SF Symbols app 中为特定图层勾选 can Rotate
  • 旋转锚点默认在符号中心，可通过 Snap to Points 对齐到路径节点

Breathe（04:02）

Breathe 同时改变透明度和尺寸，让符号呈现有生命感的状态。和 Pulse 的区别：Pulse 只改变透明度，Breathe 同时改变透明度和尺寸（04:23）。在 SF Symbols app 中，启用 Pulses 选项后，已标注 Pulse 的图层会改变透明度，给 Breathe 增加更多层次（11:06）。

Image(systemName: "drop.fill")
    .symbolEffect(.breathe)

关键点：

  • .breathe 适合表达正在进行的活动（如录音、计时）
  • 之前标注过 Pulse 的图层在 Breathe + Pulses 模式下会自动参与透明度变化
  • 不需要额外重新标注

Magic Replace（04:58）

Magic Replace 是 Replace 动画的升级。当两个符号形状相关时（比如同一基础符号加不同徽章），斜线可以独立绘制和擦除，徽章可以独立于基础符号出现、消失或替换。这是新的默认行为。如果两个符号形状无关，自动降级为标准 Replace。使用了 symbol components 的自定义符号也支持 Magic Replace，只需从 SF Symbols 6 app 重新导出并导入 Xcode 16（06:23）。

Image(systemName: isFavorite ? "heart.fill" : "heart")
    .contentTransition(.symbolEffect(.magicReplace))

关键点：

  • .magicReplace 是新的默认 Replace 行为
  • 形状无关的符号对会自动降级为标准 Replace
  • 自定义符号需从 SF Symbols 6 app 重新导出才能支持

Variable Color 闭环改进（06:39）

Variable Color 按颜色透明度逐层推进来传达状态。符号的端点设计决定了循环效果：端点不相接叫 open loop，端点相接叫 closed loop。SF Symbols 6 改进了 closed loop 符号的循环播放，现在可以无缝衔接。支持 Variable Color 的符号可以在 SF Symbols 6 app 中标注 closed loop 设计以获得更平滑的连续播放（07:31）。

动画播放控制（11:19）

SF Symbols 6 app 提供三种重复模式：Play Once（单次播放）、Repeat with Delay（循环播放，可设置间隔）、Continuous（持续播放直到显式停止）。

自定义符号标注（12:02）

在 SF Symbols 6 app 中标注自定义符号：为 Wiggle 设置 preferred direction；为 Breathe 将不同部分放入不同图层以控制动画顺序；为 Rotate 勾选 can Rotate 并设置旋转锚点——锚点默认在符号中心，可用 Snap to Points 对齐到路径节点，需在三个字重（Ultralight、Regular、Black）中分别定义（15:18）。

新符号（15:43）

SF Symbols 6 新增超过 800 个符号，总数超过 6,000 个。新增类别包括汽车（电池、敞篷车、温度指示器）、多样化的人物活动、希腊语和西里尔字母等本地化符号、进度指示器、触觉反馈、主屏幕和小组件相关符号。

核心启发

  • 做什么：用 Wiggle 替代 tooltip 或文字提示来引导用户注意关键操作按钮。为什么值得做：Wiggle 是语义明确的微动画，比静态文字提示更自然，也不会增加界面文字负担。怎么开始：在 SwiftUI 中为按钮内的 SF Symbol 添加 .symbolEffect(.wiggle)，用 .wiggle.up 等指定方向。

  • 做什么：用 Rotate By Layer 替代自定义旋转进度指示器。为什么值得做：自绘旋转动画需要管理定时器和图层，而 .symbolEffect(.rotate) 是一行代码的声明式方案，且 By Layer 模式可以让风扇等符号只转叶片。怎么开始：在 SF Symbols 6 app 中为自定义符号的旋转图层勾选 can Rotate 并设置锚点，然后在代码中使用 .symbolEffect(.rotate)。

  • 做什么：用 Breathe 表达正在进行的后台活动。为什么值得做：Breathe 同时改变透明度和尺寸，视觉存在感比 Pulse 更强，适合录制中、计时中等需要用户感知”系统仍在工作”的场景。怎么开始：将 Image(systemName: "drop.fill") 添加 .symbolEffect(.breathe)，搭配 Repeat with Delay 或 Continuous 模式。

  • 做什么：为图标的切换状态启用 Magic Replace。为什么值得做：Magic Replace 让斜线和徽章独立过渡，比标准 Replace 的切换更流畅，用户能立刻感知”什么变了”。怎么开始：用 .contentTransition(.symbolEffect(.magicReplace)) 修饰符，确保符号已从 SF Symbols 6 app 重新导出。

关联 Session

评论

GitHub Issues · utterances