SVG 動畫操作指南

已發表: 2022-03-11

任何稱職的前端工程師都知道分散的設備生態系統帶來的挑戰。不同的屏幕尺寸、分辨率和縱橫比難以提供一致的體驗。對於那些想要提供像素完美體驗的人來說更是如此。

可縮放矢量圖形 (SVG) 有助於解決部分問題，並且做得很好。儘管它們有其局限性，但 SVG 在某些情況下可能非常有用，如果您有一個優秀的設計團隊，您還可以創建視覺上更令人驚嘆的體驗，而不會給 Web 瀏覽器帶來過度負擔或妨礙加載時間。

在過去的幾個月裡，我一直在從事一個廣泛使用 SVG 及其動畫和效果功能的項目。在本文中，我將分享如何使用 SVG 及其動畫技術為您的 Web 前端工作帶來新的活力。

可縮放矢量圖形

SVG 是一種基於 XML 的圖像格式，與 HTML 的工作方式非常相似。它為許多熟悉的幾何形狀定義了不同的元素，這些幾何形狀可以在標記中組合以生成二維圖形。

SVG 規範是萬維網聯盟 (W3C) 於 1999 年開發的開放標準。

一段時間以來，所有主要的 Web 瀏覽器都支持 SVG 渲染。

由於 SVG 圖形是 XML 文檔，因此 Web 瀏覽器提供了基於 DOM 節點的 API，可用於與圖像進行交互。談論讓照片栩栩如生！

SVG 路徑

如果 SVG 中有一個過分強大的元素，那就是<path>元素。

路徑元素是一種基本形狀，可用於創建您可以想像的幾乎任何高級 2D 形狀。

該元素通過一系列繪圖命令來工作。它很像 1967 年的 Logo 編程語言，只是為了花哨的圖形進行了現代化改造和設計。該元素通過屬性d採用此繪圖命令序列。

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

你可以想像一個在屏幕上繪圖的虛擬筆，路徑元素中的繪圖註釋只是控製筆。在上面的示例中，指示筆移動到位置(10, 10) ( M10 10 )，畫一條線到(75, 10) ( L75 10 )，畫一條線到(75, 75) L75 75然後通過返回起點 ( Z ) 來關閉路徑。

使用其他繪圖命令，例如圓弧 ( A )、二次貝塞爾曲線 ( Q )、三次貝塞爾曲線 ( C ) 等，您可以在 SVG 中創建更複雜的形狀和圖形。

您可以在此處了解有關路徑元素的更多信息。

SVG 路徑和 CSS

“好的，胡安，我明白了。路徑很強大，但我如何為它們設置動畫呢？” 你說。

對於我們的第一個技術，我們將利用兩個 SVG 屬性： stroke-dasharray和stroke-dashoffset 。

stroke-dasharray 屬性控制用於描邊路徑的虛線和間隙的模式。如果您想將線條繪製為一組破折號和間隙而不是一個連續的墨水筆劃，這就是您將使用的屬性。

由於 SVG 圖像是 Web 瀏覽器的 DOM 的一部分，而 stroke-dasharray 是一個表示元素，因此也可以使用 CSS 設置該屬性。

類似地，stroke-dashoffset 屬性（它指定在破折號模式中開始破折號的距離）也可以使用 CSS 來控制。

這兩個 SVG 屬性一起可用於為 SVG 路徑設置動畫，讓查看者產生路徑正在逐漸繪製的錯覺。

以這個二次貝塞爾曲線為例：

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

為了使這條路徑動畫化，就好像它在屏幕上逐漸平滑地繪製一樣，我們必須使用 stroke-dasharray 屬性設置短劃線（和間隙）長度等於路徑長度。這樣虛線曲線中每個虛線和間隙的長度等於整個路徑的長度。

接下來，我們將使用 stroke-dashoffset 屬性將虛線偏移設置為 0。這將使路徑在屏幕上顯示為實線（我們實際上是在查看第一個虛線，並且我們已經使每個虛線跨越整個曲線的長度）。通過將虛線偏移設置為等於曲線的長度，我們最終會得到一條不可見的曲線（我們現在正在查看被渲染為整個間隙的曲線——緊跟虛線的部分）。

現在通過動畫 stroke-dashoffset 屬性，您可以使曲線逐漸出現在屏幕上。

請參閱 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路徑。

如您所見，曲線始終存在。我們只是改變虛線偏移，使虛線部分一點一點地出現。

您可以通過使用相同的原理但使用更多路徑來更進一步：

請參閱 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路徑。

在這裡，您有一條固定的黑色曲線，一條沿路徑移動的紅色曲線，以及另一條黑色曲線，緊隨紅色曲線，但在 40px 後面。

Stroke-dasharray 和 stroke-dashoffset 是兩個非常強大的屬性，可用於將過多的動畫和效果應用到 SVG 路徑。您可以嘗試使用這個方便的工具來試驗這兩個屬性。

沿 SVG 路徑為對象設置動畫

使用 SVG 和 CSS，您可以做的另一件很酷的事情是按照路徑為對像或元素設置動畫。

我們將為動畫使用 2 個 SVG 屬性：

offset-path：offset-path CSS 屬性指定元素定位的偏移路徑。
偏移距離：偏移距離 CSS 屬性指定沿偏移路徑的位置。

通過結合這兩個屬性，你可以很容易地想出這樣的動畫：

請參閱 CodePen 上 Toptal 博客 (@toptalblog) 的 Pen Toptal - SVG 和 CSS 路徑。

如您所見，我們有一個新元素div.ball 。

這個元素可以是任何東西，一個 div，一個圖像，文本，等等。此示例中的想法是，通過使用 offset-path 和 offset-distance，您可以為元素提供一條要遵循的路徑並為該距離設置動畫，並且元素將通過該路徑移動。

使用 JavaScript 的 SVG 動畫

如果所有這些還不夠花哨，你總是可以求助於 JavaScript。

使用 JavaScript 為 SVG 元素設置動畫與為 DOM 元素設置動畫非常相似。但是，使用 JavaScript，您可以實現我們上面檢查過的動畫技術，而且更容易。

以前，我們必須在 CSS 中硬編碼路徑長度。在 JavaScript 函數path.getTotalLength()的幫助下，可以即時計算路徑的長度並根據需要使用它。你可以在這裡了解更多。

此外，已經有許多庫可供您使用，它們可以使 SVG 動畫比現在更容易。

Snap.svg 不僅使使用 JavaScript 繪製 SVG 圖像變得容易，而且使它們像調用.animate({})一樣簡單。

另一個庫，anime.js，讓您只需幾行代碼就可以使 div 元素遵循 SVG 路徑。

如果您正在尋找一個可以自行完成更多功能但結果仍然令人驚嘆的庫，那麼 Vivus 就是您正在尋找的。它對 SVG 路徑動畫採用了一種不同的、更受配置驅動的方法。使用這個庫，您只需向要繪製的 SVG 元素添加一個 ID，並使用該 ID 定義一個 Vivus 對象。 Vivus 將負責其餘的工作。

延伸閱讀

以下是處理 SVG 圖像和對其進行動畫處理時可能會發現有用的資源列表：

要更深入地了解 SVG 動畫，您可以閱讀這篇關於動畫 SVG 圖像的三種方法的簡短文章，並觀看 CSS Tricks 的視頻截屏。

本文沒有涉及的一件事是使用同步多媒體集成語言 (SMIL) 為 SVG 圖像設置動畫。雖然將 CSV 用於 SVG 可以讓您使用您已經熟悉的東西，但 SMIL 將事情提升到一個新的水平。

使用 SMIL，您可以單獨使用 SVG 實現高級動畫效果，例如形狀變形。此處提供了使用 SMIL 實現此類效果的簡短但有效的指南。

雖然，目前對 SMIL 的支持有點前衛（不是雙關語）。

不折不扣的網絡動畫

在本文中，您了解了幾種使用 SVG 路徑上的 CSS 或 HTML 元素為 SVG 元素設置動畫的方法。

SVG 是輕量級的，無論屏幕大小、縮放級別和屏幕分辨率如何，都可用於生成清晰的圖形。使用 SVG，現在比以往任何時候都更容易提供現代、生動的體驗，同時獲得使用標準 Web 技術的好處。

就是這樣！希望您發現這個 SVG 動畫教程很有用並且喜歡閱讀它。

進一步閱讀 Toptal 工程博客：

如何在 CSS 中處理 SVG 動畫