SF Symbols 7 的新功能

探索 apple 图标资料库 sf symbols 的最新更新。了解全新动画系统 draw，让符号模仿手写笔画自然的流畅性；还有用来表示强度或进度的 variable draw。探索为符号增添立体感和视觉吸引力的 gradients，以及在相关符号间增强连贯性的魔术替换增强功能。此外，了解如何预览并将这些功能整合到自己的 app 中。

视频地址

此文章由AI生成，可能存在错误，如有问题，请联系djs66256@163.com

SF Symbols 7 新功能详解：Draw动画、渐变与魔术替换增强

引言

Apple 设计团队的 Kelsey 在 WWDC 上分享了 SF Symbols 7 的最新更新。作为苹果生态系统中的重要设计资源，SF Symbols 持续进化，本次更新带来了全新的动画系统、渐变效果以及魔术替换功能的增强。这些改进将使开发者能够为应用界面创造更加生动和富有表现力的视觉体验。

符号设计与构建基础

在深入了解新功能之前，理解符号的基本设计原理至关重要。每个 SF Symbol 都是从单个矢量点开始精心设计的连续路径：

• 符号由矢量点和曲线构建，而非简单的可见轮廓
• 通过精确控制比例、负空间和视觉比重来确保清晰度
• 某些形状由两条方向相反的路径创建，这对动画实现有重要影响

以箭头符号为例，其尖端形状由两条路径精心构建，这种设计方法为后续的 Draw 动画功能奠定了基础。

Draw：手写风格的动画系统

核心概念

Draw 是 SF Symbols 7 引入的全新动画系统，其灵感来源于手写笔画的自然流畅性：

• Draw On：符号在屏幕上绘制显现的动画预设
• Draw Off：符号从屏幕绘制消失的动画预设
• 利用符号的图层结构，可在关键时刻增强用户体验

播放选项

Draw 动画提供三种播放方式：

1. By Layer（按图层）：默认选项，每个路径错开开始绘制
2. Whole Symbol（整体符号）：所有图层同时绘制，适合快速即时效果
3. Individually（逐个）：新版选项，等前一个图层完成再绘制下一个，适合突出个体动作

灵活应用

Draw 功能展现出强大的适应性：

• 风向符号从左到右绘制表现运动
• 阿拉伯字符从右到左绘制符合书写方向
• 对称符号从中心向外绘制
• 复杂符号如箭头，其尖端会随路径移动，强化含义表达

渐变效果与视觉深度

SF Symbols 7 新增了渐变功能：

• 通过单一源色生成平滑线性渐变
• 兼容所有渲染模式和系统/自定义颜色
• 在大尺寸显示时效果尤为突出
• 为符号增添深度和维度感

渐变效果特别适用于需要强调符号立体感的场景，为界面元素带来更强的视觉吸引力。

魔术替换功能增强

魔术替换（Magic Replace）功能获得显著改进：

• 现在能识别并匹配符号的外框（enclosures）
• 共享外框的符号间可实现无缝过渡
• 结合 Draw Off 和 Draw On 动画效果
• 可在动画检查器中预览魔术替换预设

自定义符号标注指南

要为自定义符号添加 Draw 功能支持，需要正确标注符号：

引导点系统

Draw 动画依赖路径上的引导点（guide points）：

• 基本引导点：开放圆（起点）和实心圆（终点）
• 角落点：菱形标示，用于处理锐角转折
• 附着点：用于箭头等非绘制元素与路径关联

标注流程

1. 从常规字重开始标注（作为基础）
2. 系统自动将引导点插值到其他字重模板
3. 开启引导点编号检查顺序一致性
4. 可通过右键菜单调整引导点

完成后，可通过设置中的变量渲染开关让符号支持 Variable Draw。

API集成与使用

开发者可通过以下API使用新功能：

SwiftUI示例

// 应用Draw动画
Image(systemName: "arrow.right")
    .symbolEffect(.draw)

// 应用渐变渲染
Image(systemName: "cloud")
    .symbolRenderingMode(.gradient)

UIKit/AppKit

// 配置Draw动画
let config = UIImage.SymbolConfiguration(preset: .drawOn)

// 设置渐变渲染
let gradientConfig = UIImage.SymbolConfiguration(renderingMode: .gradient)

总结与下一步建议

SF Symbols 7 通过 Draw 动画系统、渐变效果和魔术替换增强，为开发者提供了更丰富的视觉表达工具。建议开发者：

1. 下载 SF Symbols 7 测试版预览新功能
2. 检查自定义符号的标注兼容性
3. 查阅框架文档了解详细集成方法

这些创新功能将为应用界面带来前所未有的生动表现力和一致性。

相关视频

SF Symbols 6 的新功能