如何使用 CSS 創建 SVG 動畫

已發表: 2023-02-16

Web 動畫如今風靡一時，您可以使用 SVG 設計的內容沒有限制。 如果您準備好在自己的網站上進行嘗試，了解基本的動畫概念將有助於您構建更複雜的設計。 與 JPEG 和 PNG 文件不同，SVG 非常適合 Web 上的動畫，因為它們可縮放且與分辨率無關（這意味著它們可以縮放而不會降低質量）。 它們也很容易設置樣式，因為您可以使用 CSS、過濾器和交互性來增強 SVG。

在我們深入學習本教程之前，您應該熟悉 CSS 轉換和轉換。 一些相同的概念將用於 SVG。

SVG 基礎知識

SVG，即可縮放矢量圖形，使用基於 XML 的文本格式來描述圖像的顯示方式。 SVG 是內部包含一堆 XML 的文本文件。 如果您使用代碼編輯器打開一個，您就會明白我們的意思。 SVG 可以縮放到不同大小而不會降低質量的原因是因為文本用於描述圖形。

在 SVG 圖形的代碼編輯器中

SVG 文件中的視覺信息由瀏覽器或您用來修改它的任何圖形軟件計算和呈現。 它們不像 JPG 或其他圖像文件格式那麼複雜，如果您願意，可以在文本編輯器中手動設計和編輯它們。 它們可以使用 CSS 進行更改和样式化，使它們非常適合在 Web 上進行設計。

瀏覽器對 SVG 圖形的支持非常普遍； IE8 可能會出現一些問題，但現代瀏覽器可以很好地處理 SVG。 這里或那裡可能會有小錯誤，但通常它是一帆風順的。

如何創建 SVG 圖形

Adobe Illustrator 是創建 SVG 時的首選程序之一。 事實上，它們可以從頭開始創建，因為它都是 XML，但使用設計程序可能更容易，尤其是對於更複雜的 SVG。

在 Adob​​e Illustrator 中進行設計時的提示

與任何其他 Adob​​e Illustrator 項目一樣，邊界框是創建插圖的地方，因此確保包含所有內容非常重要。 最好的方法是選擇您想要在 SVG 中包含的圖稿，然後轉到“對象”>“畫板”>“適合圖稿邊界”。

svg-animations-css-clip-artwork-to-bounds

這是非常重要的一步。 有幾次我們沒有這樣做，由於多餘的空白，圖像在網站上看起來很小。 讓一切都完美地適合邊界解決了這個問題。

svg-animations-css-artwork-to-bounds

當您處於設計模式時，這可能不是最有趣的事情，但是在您以後使用圖形進行動畫工作時，注意並保持圖層命名的一致性將對您有所幫助。 “第一層，第二層”會讓你很難記住哪些層包含圖形的哪些部分。 這樣做的原因是 Illustrator 將使用這些名稱在 SVG 代碼中生成 ID。

圖層組很棒，尤其是對於更複雜的圖形。 它們還用於在 SVG 文件中創建組。 當您使用它們時，我們強烈建議確保圖層組僅包含相關形狀，以保持您的文件乾淨並便於以後編輯。

在此文件中，您會看到輪子的外部名為“outer-wheel”，內部名為“inner-wheel”。 這是基本的，但它有效。

這是可選的，但通過 CSS 優化器運行它會很有幫助。 這樣做很有可能會減小文件大小。 一個很好的選擇是 Peter Collingridge 的 SVG Optimizer。 SVG OMG 也是一個值得研究的選項。

在 Adob​​e Illustrator 中導出 SVG 圖形

現在您已經有了最終的 SVG 圖像，需要將其導出以便可以在 Web 上使用。 轉到文件 > 另存為 > SVG。 您還可以轉到“文件”、“導出”、“.SVG”，具體取決於您使用的 Illustrator 版本。 這將保存為 flyweel_wheel。

執行此操作後，將出現一個包含幾個選項的對話框（如果您沒有看到以下所有選項，請轉到“更多選項”）：

配置文件： SVG 1.1

類型：這控制您希望如何處理設計中的任何字體並將字體嵌入為 SVG。 我們沒有任何東西，所以我們將把這個集合保留為 SVG。

子集化：此選項在需要時將字符詳細信息嵌入到 SVG 文件中。 這允許文件顯示用戶系統上可能不存在的字體。 當選擇“僅使用字形”（如果您為作品使用特殊字體）時，可以僅包含 SVG 中使用的字形（這會減小文件大小）。

圖像位置：這控制可以為 SVG 文件中的光柵化圖像數據存儲的信息，作為具有“嵌入”選項的數據 URI。 （在這種情況下不是超級相關，但這允許鏈接或嵌入圖像，這會增加文件大小。）

CSS 屬性： Presentation 屬性允許在需要時將 CSS 樣式放在 SVG 中。 根據您的用例，這可能是也可能不是最佳的。 Presentation Attributes 指定諸如fill: blue; 而不是傳統的內聯樣式： . 表示屬性通常更容易在 CSS 中覆蓋。

更多高級選項：這組複選框允許您更改各種設置，包括您在各種數字中轉到多少位小數。 這裡一個應該就夠了。 如果您的文件中涉及大量文本，則高級選項最有必要。 輸出較少<tspan>元素的選項可以顯著減小導出的 SVG 的大小。

在某些情況下，可能會沿著自定義路徑繪製文本。 使用“為路徑上的文本使用 <textPath> 元素”選項，它被導出為路徑上的文本。 “響應式”選項也很重要。 如果未選中，SVG 文件將具有硬編碼的寬度和高度。

如何使用 CSS 為 SVG 製作動畫

現在有了一個實際的 SVG 可以使用，我們可以創建一個簡單的動畫來查看這一切是如何工作的。 CSS transform 屬性和 translate 方法將幫助輪子移動。 使用 CSS 製作動畫非常棒，因為不需要安裝任何插件或庫； 您只需要 HTML 和 CSS 即可開始。

SVG 可以像 HTML 元素一樣使用 CSS 關鍵幀和動畫屬性或使用 CSS 過渡動畫。 更複雜的動畫通常會應用某種變換——平移、旋轉、縮放或傾斜。

基礎動畫

下面是一個簡單的動畫，讓輪子在懸停時變大：

 svg {
   高度：20%；
   寬度：20%；
   填充：#50c6db；
}
svg:懸停{
   變換：比例（1.25）；
   過渡持續時間：1.5s；
}
svg-動畫-css-飛輪規模

紡車動畫

這就是 Adob​​e Illustrator 的辛勤工作得到回報的地方。 有效命名圖層的努力將得到很好的利用。 使用外層和內層組，可以控制和自定義動畫，這是動畫光柵圖形的巨大優勢。

車輪 SVG 將用作加載微調器圖形。 隨著顏色從淺變深，外輪會旋轉，內輪會略微變大。

SVG 元素在大多數情況下是非常可預測的，但有一些定位問題可能會稍微棘手一些。 如果您習慣了其他 HTML 元素，它們會以相同的方式響應 transform 和 transform-origin。 需要注意的一件事是它們不遵循盒模型，即邊距、邊框、填充等。這使得定位和轉換這些元素稍微更具挑戰性。

變換原點基礎知識

transform-origin 屬性用於改變元素變換原點的位置。 HTML 元素的變換原點位於 (50%, 50%)，這是元素的中心。

svg-animations-css-在其他圖形上旋轉
這已旋轉 45 度，變換原點為 50% 和 50%。

SVG 元素的變換原點位於 (0, 0) 點，即畫布的左上角。

svg-動畫-css-旋轉-svg
這已旋轉 45 度，默認變換原點為 0 和 0。

SVG 元素是如何圍繞自己的中心旋轉的？ 需要對 transform-origin 屬性進行調整。 這可以使用百分比值或絕對值（像素、ems 或 rems）來設置。 該值將相對於元素的邊界框進行設置。

如果我們要使用百分比值將<rect>的變換原點設置為中心，它會像這樣完成：

 矩形 {
  變換原點：50% 50%；
}

造輪子

首先，設置旋轉關鍵幀是關鍵。 這將是一個旋轉圖形，因此需要完全旋轉。 還將應用淡入效果。 這個例子可以在 Codepen 上找到。

 @keyframes 旋轉{
    從{變換：旋轉（0度）;}
    到{變換：旋轉（360度）;}
}
@keyframes 淡入{
    0% {
        不透明度：0.35；
    }
    50% {
        不透明度：.5；
    }
    75% {
        不透明度：0.75；
    }
    100% {
        不透明度：0.25；
    }
}

接下來，創建 SVG 包裝器很重要。

 .svg-容器{
  高度：100%；
  寬度：100%；
  最大高度：15cm；
  最大寬度：15cm；
  保證金：0自動；
}

創建了一般 SVG 樣式，這是指定 transform-origin 的地方。

 svg {
  頂部：50%；
  左：50%；
  位置：絕對；
  最大高度：15cm；
  最大寬度：15cm；
  寬度：20%；
  高度：20%；
  填充：#50c6db；
  變換：翻譯（50%，50%）；
}
svg-動畫-css-輪圖

這是層命名變得非常有用的地方。 旋轉動畫應用於整個 SVG 圖形，因為它是在#outer-wheel上指定的，但內輪具有淡入淡出效果，僅適用於圖形的內部部分。 通過僅針對#inner-wheel ，應用淡入淡出動畫。

 #外輪{
  動畫：自旋 4s 無限線性；
}
#內輪{
  動畫：fadeIn 2s無限線性；
}
svg-動畫-css-旋轉飛輪

希望這能很好地介紹 SVG 和基本動畫技術。 隨著您對它們的使用越來越多，這些基本思想將幫助您創建更複雜的動畫。