WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Create animated symbols

Create animated symbols

SF SymbolsSwiftUIDesign
观看原视频

Highlight

SF Symbols 5 为符号引入了动画能力，开发者可以通过 SF Symbols app 预览和配置 Bounce、Pulse、Variable Color 等动画效果，并用 Symbol Components 快速创建带有徽章、斜杠、圆形外壳的系统风格图标。

核心内容

图标动画的痛点

在 iOS 16 之前，如果你想让 App 里的图标动起来，只能自己动手写动画代码。用 UIImageView 逐帧切换，或者用 Core Animation 手动控制每个图层的位置和透明度。这种方式费时费力，而且很难做到和系统风格一致。

SF Symbols 5 直接解决了这个问题。Apple 把动画能力内置到了符号系统里，开发者只需要在代码里指定动画类型，就能让图标动起来。

用 SF Symbols App 预览动画

SF Symbols app 新增了一个 Animation Inspector 面板（01:51）。选中一个符号后，可以从弹出菜单选择动画效果：

  • Bounce：弹跳动画，可以配置向上或向下弹
  • Pulse：脉冲动画，可以按图层或整体脉冲
  • Variable Color：逐层颜色变化动画

每个动画都有配置选项。比如 Bounce 可以设置 By Layer（每层独立运动）或 Whole Symbol（整体运动）。当你修改了默认配置，预览区会显示 “Modified”，点击重置按钮可以恢复默认。

找到喜欢的配置后，点击复制按钮就能拿到对应的 API 名称（03:23）。

让自定义符号支持动画

自定义符号如果已经标注了 Variable Color，天然就支持 Variable Color 动画（05:11）。

但对于 Pulse 和 Bounce 这类运动动画，需要额外标注哪些图层应该参与动画。SF Symbols 5 新增了图层标注控制：

  • 在 Annotation 列表里勾选图层，标记它参与 Pulse 动画
  • 创建 Layer Group，把多个图层编组，让它们一起运动

如果符号是从 SF Symbols 4 或更早版本导出的，或者兼容 Xcode 14，它们不包含运动信息，只能整体运动（06:07）。

Symbol Components：组合出系统风格的符号

Symbol Components 是 SF Symbols 5 的一个重磅功能（09:51）。它提供了一套系统风格的装饰组件，包括：

  • Enclosures：圆形外壳、方形外壳等
  • Badges：加号、减号、省略号等徽章
  • Slash：斜杠修饰

操作很简单：在自定义符号上右键，选择 “Combine Symbol with Component”，然后从组件库中选择想要的组件。新符号会自动继承系统符号的视觉风格和动画行为。

比如给符号加上 .circle.fill 外壳后，系统会自动处理：

  • Hierarchical 模式下使用 primary layer
  • Monochrome 模式下正确擦除背景
  • 保留原符号的 Variable Color 设置

兼容性导出

SF Symbols app 重新设计了导出流程（15:17）。导出模板时可以选择目标平台版本：

  • 默认：最新版本，支持运动优化
  • SF Symbols 3（iOS 15 / macOS Monterey）：简化绘图，不支持运动图层结构
  • SF Symbols 2（iOS 14 / macOS Big Sur）：静态模板

导出给 Xcode 时，告诉 app 你用的 Xcode 版本，它会自动选择最合适的文件格式。

详细内容

动画类型和配置

SF Symbols 5 提供了几种内置动画预设。每种动画都可以通过 SF Symbols app 的 Animation Inspector 预览和配置。

Bounce 动画

Bounce 让符号产生弹跳效果。配置选项包括：

  • Direction：Up（向上）或 Down（向下）
  • Layer Mode：By Layer（每层独立弹跳）或 Whole Symbol（整体弹跳）

Pulse 动画

Pulse 让符号产生脉冲呼吸效果。通过 Annotation 列表可以精确控制哪些图层参与脉冲。

Variable Color 动画

Variable Color 动画让符号的各层颜色依次激活。有两种模式：

  • Cumulative：各层逐渐累积激活，然后一起淡出
  • Iterative：每次只激活一层

还可以开启 Reversing 选项，让动画反向播放（04:06）。

在代码中使用符号动画

在 SwiftUI 中，符号动画通过 symbolEffect 修饰符使用：

import SwiftUI

struct ContentView: View {
    @State private var isBouncing = false
    
    var body: some View {
        Image(systemName: "speaker.wave.3.fill")
            .symbolEffect(.bounce, value: isBouncing)
            .onTapGesture {
                isBouncing.toggle()
            }
    }
}

关键点：

  • symbolEffect(.bounce) 应用 Bounce 动画
  • value 参数控制动画触发时机，值变化时播放动画
  • 系统会自动处理图层的运动效果

自定义符号的图层标注

要让自定义符号支持动画，需要在 SF Symbols app 中正确标注图层。

标注 Pulse 图层：

  1. 打开自定义符号的 Annotation 面板
  2. 找到 Pulse 相关的标注控制
  3. 勾选应该参与脉冲的图层

如果没有勾选任何图层，整个符号会一起脉冲。

创建 Layer Group：

  1. 选中多个图层
  2. 右键选择 “Add to Layer Group”
  3. 组内图层会一起运动

Layer Group 里的每个图层仍保留自己的标注设置，但运动时作为一个整体。

Symbol Components 的使用

Symbol Components 基于 Variable Templates 技术。Variable Templates 要求提供 Small 尺寸下的三个权重版本：Ultralight、Regular、Black。系统会自动混合生成其余 24 种变体。

组合符号和组件的步骤：

  1. 在 SF Symbols app 中选中自定义符号
  2. 右键选择 “Combine Symbol with Component”
  3. 从组件库选择外壳、徽章或斜杠
  4. 在侧边栏微调位置和大小

微调选项包括：

  • 调整徽章位置，避免视觉瑕疵
  • 修改斜杠长度，确保覆盖足够的符号区域
  • 在 Ultralight 或 Black 权重下勾选 Override 进行额外调整

系统会自动进行权重补偿：当基础符号缩放进外壳时，系统会增加线条粗细，保持视觉一致性（13:29）。

兼容性设置

在 SF Symbols app 的导出界面，Compatibility picker 让你选择目标平台：

目标平台对应系统版本模板特性
默认iOS 17+ / macOS Sonoma+完整运动优化
SF Symbols 3iOS 15 / macOS Monterey简化绘图，无运动
SF Symbols 2iOS 14 / macOS Big Sur静态模板

标注自定义符号时也可以设置目标平台。如果设为 SF Symbols 3 或更早，Monochrome 标注将不可编辑，因为该功能直到 SF Symbols 4 才开放（16:52）。

核心启发

给设置项加上动态图标

  • 做什么：在设置页面里，用 Pulse 动画标注当前激活的选项
  • 为什么值得做：Variable Color 动画天然适合表示”进行中”或”已激活”状态，不需要写任何动画代码
  • 怎么开始：在 SF Symbols app 里找到合适的符号，导出后在 SwiftUI 中用 symbolEffect(.pulse) 应用

用 Symbol Components 统一 App 图标风格

  • 做什么：把 App 里的自定义图标都用 Components 重新包装一遍，加上圆形外壳或徽章
  • 为什么值得做：Components 自动处理 27 种尺寸变体和动画行为，图标看起来和系统原生的一样专业
  • 怎么开始：打开 SF Symbols app，右键自定义符号，选择 “Combine Symbol with Component”

给加载状态设计专属动画

  • 做什么：为 App 的加载指示器设计一个自定义符号，用 Variable Color 动画表示进度
  • 为什么值得做：Variable Color 动画让符号各层依次点亮，比静态转圈更有品牌感
  • 怎么开始：在 SF Symbols app 中创建自定义符号，把图形拆分成多个图层并标注 Variable Color

为旧版本用户保留降级体验

  • 做什么：导出两套符号模板，一套给 iOS 17+ 用完整动画，一套给旧版本用静态版本
  • 为什么值得做：SF Symbols app 的 Compatibility picker 自动处理降级，确保所有用户都有好体验
  • 怎么开始：导出时选择对应的 SF Symbols 版本，Xcode 会自动编译正确的格式

关联 Session

评论

GitHub Issues · utterances