使用 SVGator 釋放路徑動畫的力量

（這是一篇贊助文章。）去年，關於 SVGator 基本使用的全面介紹發表在 Smashing Magazine 上。 如果您想了解 SVGator 的基礎知識、設置您的第一個項目和創建您的第一個動畫，我們強烈建議您在繼續本文之前閱讀它。

今天，我們將重新審視過去幾個月添加到其中的一些新功能，包括全新的Path Animator 。

注意： Path Animator 是 SVGator 的一項高級功能，試用用戶不可用。 在為期 7 天的試用期中，您可以在應用程序中找到的示例項目中看到 Path Animator 的工作原理，但您無法將其應用於您自己的 SVG，除非您選擇了付費計劃。 SVGator 是一項基於訂​​閱的服務。 目前，您可以在月度計劃（18 美元/月）和年度計劃（總計 144 美元，12 美元/月）之間進行選擇。 對於較長的項目，我們建議您考慮年度選項。

Path Animator 只是 SVGator 計劃在未來幾個月發布的高級功能中的第一個。 所有付費用戶都可以使用所有新功能，無論他們何時訂閱。

路徑動畫的魅力

SVG 路徑動畫絕不是新鮮事物。 在過去的幾年裡，這種豐富矢量圖形的方式已經在整個網絡中大量使用：

路徑動畫之所以受歡迎，主要是因為它們相對簡單：儘管乍一看它們可能看起來令人印象深刻且複雜，但其基本規則實際上非常簡單。

路徑動畫如何工作？

您可能認為 SVG 路徑動畫需要一些極其複雜的繪圖和變換功能。 但它比看起來要簡單得多。 要實現與上述示例類似的效果，您不需要生成、繪製或動畫實際路徑 - 您只需為它們的筆劃設置動畫。 這個絕妙的概念允許您通過為單個 SVG 屬性設置動畫來創建看似複雜的動畫： stroke-dashoffset 。

動畫這個小屬性負責整個效果。 一旦你有一條虛線，你就可以使用虛線和間隙的位置。 將它與正確的設置相結合，它將為您提供所需的自繪 SVG 路徑效果。

如果這聽起來仍然很神秘，或者您只是想更詳細地了解路徑動畫是如何製作的，您將在本文末尾找到一些關於此主題的有用資源。

無論路徑動畫與它們的外觀相比多麼簡單，不要認為編碼它們總是簡單的。 隨著您的文件變得越來越複雜，為它們製作動畫也是如此。 這就是 SVGator 來救援的地方。

此外，有時您可能不想接觸原始 SVG 文件。 或者你可能不太喜歡完全編寫代碼。 那麼 SVGator 已經為您提供了保障。 使用新的 Path Animator，您甚至可以創建最複雜的 SVG 路徑動畫，而無需接觸任何代碼。 您還可以將編碼與使用 SVGator 結合起來。

為了更好地理解 Path Animator 為我們提供的可能性，我們將介紹三個單獨的示例，展示路徑動畫的不同用例。

示例 #1：動畫文本

在第一個示例中，我們將為文本設置動畫，營造自寫字母的印象。

通常用於刻字，這種可愛的效果也可以應用於其他元素，例如圖畫和插圖。 但是有一個問題：動畫元素的樣式必須是筆觸而不是填充。 這意味著，對於我們的文本，我們不能使用任何現有的字體。

輪廓字體，無論多麼細，總是會產生封閉的形狀而不是開放的路徑。 沒有基於線條和筆劃的常規字體。

因此，如果我們想使用路徑動畫來為文本設置動畫，我們需要自己繪製（或者找一些現成的適合這個目的的矢量字母）。 在繪製字母時，請隨意使用一些現有的字體或排版作為參考——但不要侵犯任何版權！ 請記住，不可能使用開箱即用的字體。

準備文件

我們將從一個簡單的手繪草圖開始，而不是從現有字體開始：

現在是時候在設計工具中重新繪製草圖了。 我使用了 Figma，但您可以使用任何支持 SVG 導出的應用程序，例如 Sketch、Adobe XD 或 Adob​​e Illustrator。

通常，我從鋼筆工具開始，大致按照下面作為圖層導入的草圖：

完成後，我從背景中刪除草圖並優化路徑，直到我對結果感到滿意。 不管你使用什麼工具，也不管技術，最重要的是將繪圖準備為線條，並且只使用筆觸，不使用填充。

在這個例子中，我們有四個這樣的路徑。 第一個是字母“H”； 第二個是中間的三個字母“ell”； “o”是第三個。 第四個路徑是感嘆號線。

“！”的點是一個例外——它是我們將使用填充而不是描邊設置樣式的唯一圖層。 它將以與其他圖層不同的方式進行動畫處理，而不使用 Path Animator。

請注意，我們要使用 Path Animator 製作動畫的所有路徑都是打開的，除了“o”，它是一個橢圓。 儘管使用 Path Animator 對閉合路徑（例如橢圓或多邊形）進行動畫處理是完全可行的，但也值得將其設為開放路徑，因為這是精確控制動畫開始位置的最簡單方法。 在這個例子中，我在橢圓的字母“l”的末尾添加了一個小間隙，因為這是您通常開始手寫“o”的地方。

在將我們的圖層導入 SVGator 之前，最好清理圖層的結構並以描述性的方式重命名它們。 這將幫助您在使用 SVGator 後快速找到您的文件。

如果您想了解有關為路徑動畫準備形狀的更多信息，我建議您查看 SVGator 的本教程。

仔細準備圖層並儘可能多地思考是值得的。 在撰寫本文時，在 SVGator 中，您無法將文件重新導入到已經存在的動畫中。 在製作動畫時，如果您發現需要對原始文件進行一些更改的問題，則必須將其作為新項目再次導入 SVGator 並從頭開始製作動畫。

創建動畫

對圖層的結構和命名感到滿意後，將它們導入 SVGator。 然後將第一條路徑添加到時間軸，並通過從Animators列表中選擇它或按Shift + T將 Path Animator 應用到它。

為了實現自繪效果，我們的目標是將路徑的筆劃變成虛線。 破折號和間隙的長度應等於整個路徑的長度。 這允許我們用一個間隙覆蓋整個路徑以使其消失。 隱藏後，將stroke-dashoffset更改為整個路徑被破折號覆蓋的點。

SVGator 通過自動提供路徑的長度讓我們非常方便。 我們需要做的就是單擊複製它，並將其粘貼到 SVGator 需要的兩個參數中： Dashes和Offset 。 粘貼破折號中的值會將筆劃變為虛線。 您無法直接看到它，因為該線的第一個破折號覆蓋了整個路徑。 設置 Offset 將改變stroke-dashoffset以便間隙覆蓋路徑。

完成後，讓我們通過沿時間線進一步添加新關鍵幀來創建動畫。 將偏移量恢復為零，然後...... ta-da！ 您剛剛創建了一個自繪字母動畫。

不過，我們的動畫有一個小問題。 這封信是動畫的——但從後到前。 也就是說，動畫從路徑的錯誤末端開始。 至少有幾種方法可以解決它。 首先，我們可以從負偏移量開始並將其設為零，而不是將偏移量從正值設置為零。 不幸的是，這在某些瀏覽器中可能無法正常工作（例如，Safari 不接受負筆劃偏移）。 在我們等待修復這個錯誤的同時，讓我們選擇一種不同的方法。

讓我們更改 Dashes 值，使路徑以空格開頭，後跟破折號（默認情況下，虛線始終以破折號開頭）。 然後反轉偏移動畫的值。 這將在相反方向上為線設置動畫。

現在我們已經完成了“H”，我們可以繼續以相同的方式為所有其他路徑設置動畫。 最後，我們通過動畫感嘆號的點來完成。 因為它是一個帶填充的圓圈，而不是輪廓，所以我們不會使用 Path Animator。 取而代之的是，我們使用 Scale Animator 在動畫結束時使點彈出。

在播放縮放動畫時，請務必記住檢查元素變換原點的位置。 在 SVG 中，默認情況下，所有元素的變換原點都位於畫布的左上角。 這通常使編碼轉換函數成為一項非常困難和乏味的任務。 幸運的是，SVGator 通過計算與對象而不是畫布相關的所有變換，為我們省去了所有這些麻煩。 默認情況下，SVGator 將每個元素的變換原點設置在其自己的左上角。 您可以使用圖層名稱旁邊的按鈕從時間軸更改其位置。

讓我們為動畫添加最後的潤色並調整計時功能。 定時函數定義了動畫對象隨時間變化的速度，允許我們操縱它們的動態並使動畫看起來更自然。

在這種情況下，我們想要給人的印像是通過單次連續移動手來書寫文本。 因此，我對第一個字母應用了Ease-in函數，對最後一個字母應用了Ease-out函數，中間的字母使用默認的線性函數。 在 SVGator 中，時間函數可以從時間軸應用到 Animator 的參數旁邊：

對感嘆號應用相同的邏輯後，我們的動畫就完成了，可以導出了！

示例 #2：動畫圖標

現在讓我們分析一個更側重於 UI 的示例。 在這裡，我們將使用 SVGator 來複製流行的圖標動畫：將漢堡菜單變成關閉按鈕。

動畫的目標是平滑地變換圖標，使漢堡的中間條變成一個圓圈，而周圍的條相互交叉，形成一個閉合圖標。

準備文件

為了更好地理解我們正在構建什麼以及如何為此類動畫準備文件，從表示動畫關鍵狀態的粗略草圖開始很有用。

一旦我們對動畫的組成有了大致的了解，我們就可以繪製允許我們創建它的形狀。 讓我們從圓圈開始。 因為我們要使用路徑動畫，所以我們需要創建一個覆蓋整個路線的路徑，從漢堡菜單中間的直條開始，並圍繞它完成一個圓圈。

菜單圖標的其他兩個欄有一個更簡單的任務——我們只是要旋轉它們並與圓心對齊。 一旦我們將所有形狀組合在一起，我們就可以將文件導出為 SVG 並將其導入 SVGator。

創建動畫

讓我們首先將第一個形狀添加到時間軸並對其應用 Path Animator。 對於初始狀態，我們只希望中間的水平線可見，而路徑的其餘部分保持隱藏。 要實現它，請將破折號的長度設置為等於漢堡線的長度。 這將使我們的菜單圖標中間直線。 要找到正確的值，您可以使用漢堡包的其他行之一的長度。 您可以從時間線或應用右側欄中的“屬性”面板複製它。

然後將以下間隙的長度設置為大於路徑剩余長度的值，使其變得透明。

我們動畫的初始狀態現在已經準備好了。 接下來發生的是我們把這條線變成一個圓圈。 為此，需要同時發生兩件事。 首先，我們使用Offset沿路徑移動線。 其次，我們改變虛線的寬度，使線條更長，覆蓋整個圓圈。

準備好圓圈後，讓我們來處理關閉圖標。 和之前一樣，我們需要同時添加兩個動畫。 首先，我們希望頂線向下傾斜（45 度），底線向上移動（-45 度），直到它們對稱地相互交叉。 其次，我們需要將線條稍微向右移動，以使它們與圓圈對齊。

您可能還記得前面的示例，在 SVGator 中，默認情況下變換原點位於左上角。 這對我們來說非常方便，因為在這種情況下，這正是我們希望他們出現的地方。 我們需要做的就是應用正確的旋轉角度。

在將線條與圓對齊時，請注意我們不必單獨移動它們。 我們可以將包含這兩條線的組添加到時間軸，並使用單個位置動畫器將它們一起設置動畫，而不是向兩條線都添加 Animator。 那是一個漂亮、乾淨的文件結構得到回報的時刻之一。

接下來要做的是添加一個反向動畫，將關閉按鈕變回漢堡菜單。 為此，我們基本上可以按照相反的順序執行前面的步驟。 為了加快速度，複製並粘貼時間軸上的現有關鍵幀——這是 SVGator 在過去幾個月推出的又一改進。

完成後，不要忘記調整計時功能。 在這裡，我決定對所有元素使用Ease-in-out效果。 我們的圖標已準備好採取行動。

執行

儘管實現微交互遠遠超出了本文的範圍，但讓我花點時間簡要描述一下如何在實際項目中實現這種動畫。

插圖和裝飾動畫通常更直接。 很多時候，您可以直接使用 SVGator 生成的 SVG 文件。 不過，我們不能這樣說我們的圖標。 我們希望當用戶單擊按鈕打開菜單抽屜時觸發動畫的第一部分，並且當用戶第二次單擊按鈕關閉菜單時播放動畫的第二部分。

為此，我們需要將動畫分割成幾個單獨的部分。 我們不會在這裡討論實現此類動畫的技術細節，因為它在很大程度上取決於您正在使用的環境和技術堆棧； 但至少讓我們檢查生成的 SVG 文件以提取關鍵的動畫狀態。

我們將首先隱藏背景並調整畫布的大小以匹配圖標的尺寸。 在 SVGator 中，我們可以隨時執行此操作，並且對我們的畫布大小沒有任何限制。 我們還可以編輯圖標的樣式，例如筆劃的顏色和寬度，並使用右上角的開關測試您的圖形在深色背景上的外觀。

準備好後，我們可以將圖標導出為 SVG 並在文本編輯器中打開它。

您在文檔正文中看到的元素是圖形的組成部分。 您還應該注意到第一行代碼非常長。 在打開的<svg>標記之後，有一個<style>元素，裡面有很多縮小的 CSS。 這就是所有動畫發生的地方。

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

SVGator 為我們縮小代碼真的很棒。 但是，我們必須撤消它。 完整編寫 CSS 代碼後（您可以在瀏覽器的開發工具中或在許多在線代碼格式化程序中執行此操作），您會看到它是一個很長的@keyframes列表，後跟一個id規則列表，使用@keyframes在他們的animation屬性中。

代碼可能看起來不可讀（即使格式很好），而是非常重複。 一旦你理解了基本規則，遵循它就不再那麼難了。 首先，我們有@keyframes 。 每個動畫元素都有自己的@keyframes @-rule。 它們的排序順序與 SVGator 中的元素相同。 因此，在我們的例子中，第一個 @-rule 適用於漢堡圖標的中間欄，第二個適用於頂部欄，依此類推。 裡面的關鍵幀也與 SVGator 中創建的關鍵幀的順序相匹配：

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

您現在需要做的就是使用關鍵幀中的這些值來編碼您的交互。 前面還有很多工作要做，但感謝 SVGator，關鍵部分已經完成。

接下來發生的事情是另一個故事。 但是，如果您想看看這個動畫在實踐中如何工作的示例，這裡有一個小 CodePen 供您使用：

該示例使用 React 構建，並使用狀態來切換 CSS 類並觸發相應 CSS 值之間的轉換。 因此，不需要animation屬性和@keyframes @-rules。

您可以使用 SCSS 代碼頂部列出的一組 CSS 自定義優先級來控製圖標的樣式以及過渡的持續時間。

示例#3：動畫插圖

對於本文的第三個也是最後一個示例，我們將創建一個帶有軌道粒子的原子的動畫插圖。

虛線和虛線

在前面的兩個示例中，我們利用了虛線 SVG 路徑。 虛線很酷，但你知道 SVG 也支持虛線嗎？ SVG 中的虛線不多，不少於圓頂的虛線，虛線的長度等於 0。

如果我們可以有很多點的路徑，誰說我們不能有一個點的路徑？ 為筆劃的偏移設置動畫，您將獲得一個沿著您想要的任何路徑的圓圈動畫。 在這個例子中，路徑是一個橢圓，一個圓代表一個軌道粒子。

準備文件

由於沒有 SVG 元素可以同時具有兩個筆劃，因此對於每個粒子，我們需要兩個橢圓。 第一個是軌道，第二個是粒子。 將它乘以三，再與中間的另一個圓圈結合起來作為原子核，這就是：一個簡單的原子插圖，可以製作動畫了。

注意：在撰寫本文時，在 Figma 中創建虛線是一項艱鉅的任務。 您不僅不能將破折號的長度設置為零，而且您也不能在破折號之間創建足夠長的間隙以覆蓋整個路徑。 當涉及到導出時，您的所有設置都消失了。 儘管如此，如果您正在使用 Figma，請不要灰心。 我們將在 SVGator 中輕鬆解決所有這些問題。 如果您使用 Sketch、Illustrator 或類似軟件，則根本不會遇到這些問題。

創建動畫

將 SVG 文件導入 SVGator 後，我們將從修復虛線開始。 如上所述，要實現完美的圓形點，我們需要將虛線長度設置為零。 我們還將間隙的長度設置為等於路徑的長度（從上面複製）。 這將使我們的點成為唯一可見的點。

三個粒子都準備好後，我們可以添加新的關鍵幀並將偏移設置為路徑的一個完整長度。 最後，我們稍微調整一下偏移值，讓點的位置感覺更隨機一些。

請記住，如果您發現動畫太快或太慢，您可以隨時在設置中更改其持續時間。 目前，SVGator 支持長達 30 秒的動畫。

最後，我為整個圖形添加了一點反彈。

現在動畫已準備就緒，可以用作加載器圖形了。

關於可訪問性的簡短說明

如您所見，使用 SVG 可以實現的功能幾乎沒有限制。 路徑動畫是其工具包中非常重要的一部分。 但正如一位智者所說，權力越大，責任越大。 請不要過度使用它們。 動畫可以為您的產品增添活力並取悅用戶，但過多的動畫也會破壞整個體驗。

另外，考慮允許用戶禁用動畫。 患有暈動病和其他相關疾病的人會發現這樣的選擇非常有幫助。

結論

這就是今天的內容。 我希望您通過路徑動畫的可能性享受這次旅程。 要親自試用它們，只需訪問 SVGator 的網站，您還可以了解它的其他功能和定價。 如果您有任何意見或問題，請不要猶豫，在評論中添加它們。 請繼續關注 SVGator 的下一次更新——還有許多其他令人驚嘆的新功能已經在開發中！

延伸閱讀

• “SVG 線動畫的工作原理”，Chris Coyer SVG 路徑動畫的插圖指南，精美地解釋了它們的實際工作原理。
• “SVG 和設計工具實用指南”，Mikolaj Dobrucki SVG 基礎知識的廣泛指南，可幫助您了解設計工具如何生成 SVG，以及如何使用它來發揮自己的優勢。
• “Revisiting Prefers-Reduced-Motion, The Reduced Motion Media Query,” Eric Bailey對動畫和可訪問性主題的精彩介紹。
• “如何創建路徑動畫”，SVGator關於路徑動畫師的簡短而甜蜜的 YouTube 視頻教程

有用的資源

• SVGator Path Animations從其原始登錄頁面閱讀有關 Path Animator 的更多信息。
• SVGator 教程一系列視頻教程，解釋 SVGator 的關鍵特性。
• SVGator 幫助中心解答有關 SVGator、其功能和會員計劃的最常見問題。