如何使用SVG和CSS來動畫文本

使用SVG和CSS製作動畫文本效果

最近，我在幫助朋友Jez製作他的新聞通訊網站Dept. of Enthusiasm時，產生了一個想法：如果我們讓標題中的“enthusiasm”這個詞稍微動起來會怎樣？例如，如果單詞中的每個字母都充滿活力地上下跳動？

效果如下：

很酷吧？我知道我們可以使用SVG來創建文本，然後用CSS來製作動畫。每個字母都是一個帶有自己類名的路徑，這使得選擇每個字母成為可能。也就是說，沒有什麼能阻止我們使用HTML和CSS來實現這一點。使用SVG只是當時我覺得合適的一種方法。

首先，我們打開Figma，將文本輸入到單獨的文本框中。這樣做是為了當我們點擊這裡的“Outline stroke”（輪廓描邊）菜單項時……

……我們可以得到每個字母的單獨矢量。這將有助於我們在導出SVG時為每個元素添加正確的CSS類。一旦我們描繪了每個字母的描邊，我們就可以編輯矢量中的點（但對於我們即將要做的事情，我們不需要這樣做）：

如果我們將所有文本放在一個框中並點擊“Outline Stroke”，那麼它將創建一個包含所有這些字母的單個矢量。然後，它將創建一個包含坐標的單個路徑，這對我來說很難進行樣式設置，甚至很難理解那裡到底發生了什麼。

接下來，我把所有這些字母放在一個框架中（Sketch稱之為畫板），並將每個單詞放入一個組中。這樣，當它們被導出為SVG時，每個單詞都將位於它自己的g標籤中，這也有助於我們設置字母的樣式：

然後，我導出了SVG——但是！ ——我必須確保在導出時包含id選項。

如果我們不這樣做，我們將得到每個字母的一堆路徑元素，但它們將沒有id屬性。

導出後，我們得到以下結果：

我不確定有多少奇怪之處是我的問題，有多少是Figma的SVG導出問題，但我刪除了<rect></rect>元素，因為它是不必要的。然後，我為body元素設置了一個背景，這樣我就可以看到文本並刪除SVG本身的內聯高度和寬度屬性：<rect></rect>

太棒了！現在我們可以進入有趣的部分：為單詞中的每個字母製作動畫。

如果你查看上面示例的HTML，你會注意到有一個g元素，它的id與Figma中的框架名稱相同。每個單詞也有g元素，構成單詞的每個路徑都有一個單獨的id。 （這就是為什麼正確命名我們的框架和組，以及在任何設計應用程序中保持良好的組織性非常重要的原因。）

令我驚訝的一件事是每個路徑的導出順序：它與我預期的順序相反，“ENTHUSIASM”組中的第一個字母是M。所以我稍微清理了一下，確保每個字母都按正確的順序排列。

為了使動畫工作，我們首先將每個字母向下移動2像素：

 g path {
  transform: translateY(2px);
}

這是因為我希望每個字母都能跳動2像素，我們稍後會講到這一點。我還注意到，通過此更改，我還需要更新SVG視口。否則，每個字母的底部將被切掉：

<svg fill="none" viewbox="0 0 146 13" xmlns="http://www.w3.org/2000/svg"></svg>

我可能應該只是在Figma中重新定位框架內的文本並再次導出它，但這對我需要的東西來說已經足夠了。

現在我可以定位SVG中的第三個組（單詞“enthusiasm”）並將animation-count設置為無限：

 /* targets the word "enthusiasm" */
g:nth-child(3) path {
  animation-name: wiggleWiggle;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

上面的代碼調用下面的wiggleWiggle動畫：

 @keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 2px); /* stay on the baseline for most of the animation duration */
  }

  0% {
    transform: translate(0, 0px); /* hop up */
  }
  10% {
    transform: translate(0, 2px); /* return to baseline */
  }
}

看到那個關鍵幀的開頭—— 20% , 100%部分了嗎？它的意思是“讓所有文本在動畫的大部分時間裡都保持在基線上”。這就是給我們每個反彈之間帶來很好延遲的原因：

我從Geoff關於動畫時間的這篇非常好的文章中學到了這個技巧，如果您即將開始學習CSS動畫，我強烈建議您查看一下。

現在是有趣的部分：使用animation-delay屬性，我們可以使每個字母在之前的字母之後跳動。我肯定有更聰明的方法可以做到這一點，但我只是使用了每個字母的id，如下所示：

 #E {
  animation-delay: 0s;
}

#N {
  animation-delay: 0.1s;
}

#T {
  animation-delay: 0.15s;
}

#H {
  animation-delay: 0.2s;
}

#U {
  animation-delay: 0.25s;
}

#S_2 {
  animation-delay: 0.3s;
}

#I {
  animation-delay: 0.35s;
}

#A {
  animation-delay: 0.4s;
}

#S {
  animation-delay: 0.45s;
}

#M {
  animation-delay: 0.5s;
}

它確實很凌亂，但是編寫循環並不會節省我很多時間，而且將來也不需要更新它，所以我認為它已經足夠好了。就這樣，我們差不多完成了！

現在我們有一個彈跳的、充滿活力的標題來問好。為跳動的文字歡呼！

以上是如何使用SVG和CSS來動畫文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！