What's new in SF Symbols 7
SwiftUI & UI Frameworks 进阶 2m

What's new in SF Symbols 7

2025年6月9日

在 Apple 官方观看视频

一句话判断

Draw 动画系统是 SF Symbols 7 的主角 — 手写笔画风格的符号进场/退场动画，配合 Variable Draw 表达进度，加上渐变渲染和 Magic Replace 增强，自定义符号的标注工具也全面升级。三行代码就能让 icon “画出来”。

这场 Session 讲了什么

Kelsey 覆盖了 SF Symbols 7 的四大更新：

Draw 动画系统：新的 Draw On / Draw Off 动画预设，符号沿定义路径绘制/擦除。三种播放模式：By Layer（默认，各层错开绘制）、Whole Symbol（所有层同时绘制）、Individually（逐层绘制，前一层完成后才开始下一层）。符号定义自己的绘制方向（如风从左到右，阿拉伯字符从右到左，对称符号从中心向外）。支持复合形状（如箭头的头部跟随路径移动）。Draw Off 支持沿绘制方向或反向擦除。

Variable Draw：在 Variable Color 之外的新渲染预设。在指定百分比处绘制路径，底层显示降低透明度的完整图层。适合表达下载进度、温度、运动完成度等。符号可以同时支持 Variable Color 和 Variable Draw，但渲染时只能选一个。

Magic Replace 增强：识别匹配的 enclosure（外壳）并保留它们，同时替换差异部分。Draw 动画也被引入 Magic Replace — 退出符号用 Draw Off，进入符号用 Draw On，enclosure 匹配 + Draw 混合提供最流畅的过渡。

渐变渲染：从单一源颜色生成平滑线性渐变，增加光影深度感。适用于所有渲染模式（monochrome、hierarchical、palette、multicolor），在大尺寸符号上效果最佳。

自定义符号标注：guide points 系统控制 Draw 动画的路径。最少两个点（起点 + 终点），复杂路径需要额外拐角点。支持单向、双向、圆形路径。支持 attachments（如箭头头部跟随路径）。三种权重（regular/ultralight/black）标注后系统自动插值到所有九种权重。variable draw 可以逐层开关。

值得深挖的点

  1. Draw 不只是装饰动画，它可以表达语义。“画勾”表示完成，“画 X”表示错误，“画圆”表示加载。在合适的场景（如操作反馈、引导流程）中使用 Draw 比 fade/in/out 更有表现力。

  2. Variable Draw 比 Variable Color 有更高分辨率。Variable Color 通过颜色深浅表达进度，Variable Draw 通过路径绘制百分比表达。对于下载、温度等进度场景，Draw 更直观。

  3. guide points 的标注有一定学习曲线。简单路径（两个点）很容易，但复杂路径（多拐角、复合形状、双向绘制）需要理解 corner points、attachments、subpath 等概念。建议从复制系统符号开始练习。

  4. 渐变渲染是全局开关。一个 modifier 就能让所有符号（系统和自定义）使用渐变。不需要逐个标注。

代码片段

Draw 动画：

// SwiftUI
Image(systemName: "checkmark")
    .symbolEffect(.drawOn, isActive: isChecked)

// UIKit / AppKit
symbolImageView.addSymbolEffect(.drawOn)

// 指定播放模式
Image(systemName: "arrow.right")
    .symbolEffect(.drawOn, options: .wholeSymbol)

Variable Draw：

Image(systemName: "thermometer")
    .symbolRenderingMode(.variable) // 默认用 color
    .foregroundStyle(.orange)

// 强制使用 draw 渲染
Image(systemName: "arrow.down.circle")
    .symbolRenderingMode(.draw) // 需要符号支持
    .symbolVariableValue(0.65) // 绘制 65%

渐变渲染：

// SwiftUI
Image(systemName: "star.fill")
    .symbolRenderingMode(.gradient) // 新的渲染模式

// UIKit
let config = UIImage.SymbolConfiguration(
    renderingMode: .gradient
)

最佳实践

  1. Draw 动画用在强调关键操作反馈的场景。不要到处用 — 勾选完成、错误提示、引导流程等少数关键节点效果最好。

  2. 渐变在大尺寸符号上效果最佳。小图标上的渐变可能不明显，这是正常的。

  3. 自定义符号标注从复制系统符号开始。在 SF Symbols app 中 duplicate 一个系统符号，删除现有 guide points，重新标注。这是学习标注规则最有效的方式。

  4. 标注三个权重就够了。regular 是基础，ultralight 和 black 是模板，系统自动插值中间权重。确保三个权重的 guide points 顺序一致。

  5. Variable Draw 和 Variable Color 二选一渲染。在设计时决定哪个更合适你的场景，用 .default 让系统选择符号偏好。

还有什么值得关注

  • SF Symbols 7 app 新增了 Draw toolbar、guide point 模式、gradient 预览开关等 UI 工具。
  • Magic Replace 的 enclosure 匹配意味着相关符号之间的过渡会更自然（如 play -> pause，但保留共同的圆形外壳）。
  • Adaptive end caps 让绘制动画的端点风格与符号的实际端点风格匹配，视觉上更自然。
  • Copy Code 按钮在 SF Symbols app 中直接生成对应 API 代码，省去查文档的时间。
SwiftUI Design