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

What’s new in SF Symbols 7

SwiftUIDesign
观看原视频

Highlight

SF Symbols 7 带来 Draw 动画系统、Variable Draw、Magic Replace 增强、渐变渲染，以及自定义符号的 guide points 标注流程。

核心内容

过去做 App 内符号的细节反馈，开发者经常陷入两难：要么用一段静态的 SF Symbol，毫无表现力；要么自己画 SVG、写 Lottie，把每一种状态切换、进度提示都做成自定义动画。结果是图标库越堆越大，风格越用越乱，跟系统原生的过渡也对不上。Apple 设计团队的 Kelsey 在这场 session 里给出的答案，是把「绘制」这件事做进 SF Symbols 本身。

SF Symbols 7 围绕一条主线展开：把符号当成一笔一笔写出来的字，而不是一张固定的图。Draw 动画让符号沿着自己的路径绘制和擦除（01:49）；Variable Draw 把这条路径变成可量化的进度条；Magic Replace 学会识别「外壳」并保留它们，使两个相关符号的切换更连贯（06:03）；渐变渲染统一应用到所有渲染模式上；自定义符号则通过 guide points 系统接入这一整套能力。所有这些都封装进熟悉的 symbolEffect 修饰符与 SymbolEffect 类型，App 端只改几行代码就能升级。

详细内容

Draw 动画系统（01:49）。新增两个动画预设：Draw On 把符号画到屏幕上，Draw Off 把符号擦掉。沿用现有的播放选项：By Layer（默认，逐层错开起始时间）、Whole Symbol（所有层同时绘制）；并新增 Individually 选项，逐层串行绘制，等上一层完成再开始下一层（03:08）。每个符号定义自己的绘制方向：风从左到右，阿拉伯字符从右到左，对称符号从中心向外（03:28）。复合形状（如箭头）支持在绘制过程中让箭头跟随路径移动（03:56）。Draw Off 多一个 reverse 开关，决定沿原方向继续擦除还是反方向擦除（04:35）。

Variable Draw（04:48）。它复用 Draw 的标注，但作为一种渲染预设：在指定百分比处绘制路径，下面叠一层降低透明度的完整图层。适合下载进度、温度计、瑜伽完成度这类逐步推进的可视化。一个符号可以同时声明支持 Variable Color 与 Variable Draw，但渲染时只能选一个，未指定则交给 .default 让系统选符号偏好的模式（05:50）。

Magic Replace 增强（06:03）。Magic Replace 现在会识别匹配的 enclosure（外壳，例如方框或圆环），保留它们，只替换中间不同的部分。同时把 Draw 引入 Magic Replace：退出符号走 Draw Off，进入符号走 Draw On，两者与 enclosure 匹配组合给出最连续的过渡。

渐变渲染（07:00）。从单一源色生成平滑线性渐变，让符号有光影深度。系统色和自定义色都支持，monochrome、hierarchical、palette、multicolor 四种渲染模式都可叠加渐变；尺寸越大效果越明显。

自定义符号标注（08:05）。Draw 动画依赖 guide points。一条路径至少要 2 个点：起点（空心圆）、终点（实心圆）。复杂路径需要在拐角处加点，急转弯要标记为 corner point（菱形指示，特殊地把同侧的两个点关联起来，17:38）。多 subpath 的圆形：放第一个 guide point 时系统会识别跨两条 subpath，把它当起点+终点；默认顺时针绘制，可在右键菜单里切换为逆时针（14:13）。带箭头的复合形状：把箭头拖到已有 guide point 上即创建 attachment（非绘制元素，跟随路径移动，15:11）。九档 weight、三档 scale，只需标注 regular、ultralight、black 三种 weight，系统插值其余六档；三个权重的 guide point 顺序必须一致，可打开 guide point numbers 检查顺序（19:43）。

API 更新（20:51）。Draw、Variable Draw、Gradient 都通过现成入口接入 SwiftUI / UIKit / AppKit。SwiftUI 触发 Draw On/Off：

Image(systemName: "trash")
    .symbolEffect(.drawOn, options: .speed(0.8), isActive: !isHidden)

关键点：

  • Image(systemName:)：还是常规 SF Symbol，无需替换图标资源。
  • .symbolEffect(.drawOn, ...)：使用新的 drawOn 预设；isHidden 状态切换时符号会先 Draw Off 再 Draw On。
  • options:：和其他 symbol effect 一样可以覆盖默认的 By Layer，改用 Whole Symbol 或 Individually。

UIKit / AppKit 触发 Draw：

imageView.addSymbolEffect(.drawOn)
imageView.addSymbolEffect(.drawOff)

关键点：

  • 在 UIKit / AppKit 里 Draw On 和 Draw Off 是两个独立的 addSymbolEffect 调用，按需触发。
  • 用现有 API 表面，不需要新的视图类型。

启用 Variable Draw 渲染：

Image(systemName: "thermometer")
    .symbolVariableValueMode(.draw)
    .symbolEffect(.variableColor.iterative, value: progress)
    .imageScale(.large)

关键点：

  • .symbolVariableValueMode(.draw)：告诉系统 variable value 走 Draw 而非 Color；不写则使用符号偏好的默认。
  • value: progress：把进度（0–1）作为 variable value 输入，符号按百分比绘制对应路径。

启用渐变渲染：

// SwiftUI
Image(systemName: "heart.fill")
    .symbolColorRenderingMode(.gradient)

// UIKit / AppKit
let config = UIImage.SymbolConfiguration(colorRenderingMode: .gradient)
imageView.preferredSymbolConfiguration = config

关键点：

  • SwiftUI 通过 .symbolColorRenderingMode(.gradient) 修饰符开启渐变。
  • UIKit / AppKit 通过 SymbolConfiguration(colorRenderingMode:) 配置；与 monochrome、hierarchical、palette、multicolor 任意一种叠加都生效。
  • SF Symbols app 的 Copy Code 按钮会把当前预览状态对应的代码复制出来，不必死记参数（22:01）。

核心启发

  • 做什么：把关键状态切换升级为 Draw + Magic Replace。 为什么值得做：勾选完成、错误回执、引导步骤这种关键节点，过去用淡入淡出反馈太弱，自定义动画又会和系统其余部分割裂；Draw + enclosure 匹配能在零美术成本下做出和系统一致的笔触感过渡。 怎么开始：先列出 App 里 5 个最常被点击的图标变化（点赞、收藏、播放/暂停、勾选、删除），把它们换成 .symbolEffect(.drawOn) 与 Magic Replace，逐个对比体验。

  • 做什么：把进度类 UI 改用 Variable Draw 表达。 为什么值得做：下载条、温度计、训练完成度这种线性进度，过去要么用 ProgressView，要么自己画一个圆环；Variable Draw 让一个符号自身就能承担「形状 + 进度」两层语义，省掉两个视图。 怎么开始：找一个现成的 ProgressView 场景，挑一个语义贴近的系统符号（如 arrow.down.circle、thermometer），改成 Image(systemName:).symbolVariableValueMode(.draw) 并把进度 0–1 写进 value。

  • 做什么：审计自定义符号是否需要补 guide points。 为什么值得做：旧的自定义 SVG 符号没有 guide points，无法享受 Draw、Variable Draw、Magic Replace；不补的话 App 升级到 SF Symbols 7 后视觉一致性会断层。 怎么开始：在 SF Symbols app 里 duplicate 一个最相近的系统符号，删掉它的 guide points 重新标注一遍熟悉规则，再回头改自家的 custom symbol；只标 regular / ultralight / black 三个权重，剩下的让系统插值。

  • 做什么：在大尺寸 hero 图标上启用渐变渲染。 为什么值得做：渐变在大尺寸符号上效果最明显，能让设置页头图、空态插画、onboarding 大图标具备深度感而不引入新资源。 怎么开始：找出 App 内所有 size ≥ 64pt 的 SF Symbol 使用点，逐个加上 .symbolColorRenderingMode(.gradient)，小尺寸保持原样。

关联 Session

评论

GitHub Issues · utterances