WWDC25 亮點：SF Symbols 7 帶入手寫風「Draw」動畫與漸層渲染

今年的 WWDC25 帶來了 SF Symbols 7 的重大更新，這次的更新不僅僅是圖標庫的擴充，更引入了受手寫啟發的「Draw」動畫、增強的 Magic Replace 功能以及全新的漸層渲染效果。無論是設計師還是開發者，都能透過新的註釋工具（Annotation）和 API，讓應用程式中的符號展現出更生動的生命力與細節。

全新 Draw 動畫：賦予符號書寫般的生命力

SF Symbols 7 引入了名為「Draw」的全新動畫功能，這是一組受手寫筆觸啟發的功能，讓符號能沿著定義好的路徑生動地繪製出來。系統提供了兩種新的預設動畫：「Draw On」（繪製出現）與「Draw Off」（繪製消失）。這些動畫利用了符號的圖層結構，幫助開發者在關鍵時刻強調介面中的互動。

• 預設 By Layer：每個路徑錯開起始時間，依序繪製
• 整體 Whole Symbol：所有圖層同時開始並同時結束繪製，適合追求快速、即時效果的場景
• 逐一 Individually：依序繪製每個圖層，前一個圖層完成後才開始下一個，適合引導使用者注意力的場景

此外，「Draw」動畫具有高度靈活性，支援不同的繪製方向，例如風的符號可以從左向右繪製以傳達動態，而阿拉伯文則由右向左繪製以符合書寫方向。

Variable Draw 與渲染增強

除了基礎動畫，SF Symbols 7 還將「Draw」帶入了可變渲染（Variable Rendering）中，稱為「Variable Draw」 。這項功能允許符號根據數值（例如下載進度、溫度變化或健身完成度）在降低不透明度的圖層上繪製出特定百分比的路徑，非常適合用來視覺化進度。需要注意的是，雖然符號可以同時支援 Variable Color 和 Variable Draw，但在渲染時只能擇一使用。

同時，為了增加視覺深度，SF Symbols 正式支援「漸層」（Gradients）。新的漸層渲染能從單一來源顏色生成平滑的線性漸層，適用於所有渲染模式及自定義符號，能有效創造出平面色彩無法達到的光影感與立體感。

更聰明的 Magic Replace

Magic Replace 功能在今年也變得更加強大，旨在提供相關符號之間更具連續性的動畫過場。現在，系統能識別兩個符號之間相匹配的外框（Enclosures），在轉換時保留相同的部分，僅替換不同的圖層，從而實現無縫過渡。對於支援的符號，Magic Replace 還會結合 Draw 動畫，讓舊符號以「Draw Off」消失，新符號以「Draw On」出現，提供極具表現力的轉場效果。

自定義符號的註釋（Annotation）技巧

為了讓自定義符號也能支援這些新功能，SF Symbols App 提供了強大的註釋工具。理解符號的構造是關鍵，符號是由精心勾勒的路徑組成，而非單純的線條。要啟用 Draw 動畫，開發者需要在路徑上放置「引導點」（Guide Points）。

• 引導點設置：至少需要兩個點（起點為空心圓，終點為實心圓）來計算繪製路徑
• 轉角處理：對於急轉彎的路徑，需要將引導點標記為「Corner」（菱形），以確保繪製過程流暢
• 雙向繪製：對於像波浪這種從中心向外擴散的符號，可以設置中心為起點，系統會自動識別並支援雙向繪製
• 端點樣式（Adaptive End Caps）：可以通過上下文選單配置自適應端點，讓動畫過程中的線條端點與設計風格保持一致
• 附件（Attachments）：對於像箭頭這種由多個路徑組成的符號，可以將箭頭部分作為附件拖曳到引導點上，使其跟隨路徑移動

在製作自定義符號時，只需優先註釋 Regular 權重，系統會自動將引導點插值應用到 Ultralight 和 Black 權重上。開發者可以使用「引導點編號」功能來檢查不同權重下的點順序是否一致，確保動畫在所有配置下都能正確執行。

開發實作：透過 API 應用新功能

在程式碼中應用這些新功能非常直觀。無論是 SwiftUI 還是 UIKit／AppKit，Apple 都提供了對應的 API 更新。

• 動畫預設：在 SwiftUI 中，可以使用 standard 的 symbolEffect 修飾符來應用 Draw 動畫；在 UIKit/AppKit 中則分別指定 Draw On 或 Draw Off
• 可變繪製：指定 variable value 模式並設定數值，即可實現進度條般的繪製效果
• 漸層渲染：將顏色渲染模式設置為 gradient 即可啟用漸層效果

現在就下載 SF Symbols 7 Beta，開始為您的 App 增添更細膩的動態體驗吧！