此代碼筆的靈感來自 Sten Hougaard 的作品

準備工作

讓我們為不同的動畫實作創建兩個容器：

 
Animated text
  
 



 
Click on me!
  
 

我用Adobe illustrator製作了svg，它的主要特色就是高度小，寬度大。
值得一提的是，svg 是 header 元素的子元素，因為我們將相對於它定位 svg。

CSS

我們將容器轉變為彈性盒，以優雅地將所有內容放置在中心。

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline 用於簡單地將元素的寬度減小到其內容，因為 svg 將依賴它

接下來，我們應該相對於標題定位 svg：

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

我們使用標準方法將相對元素定位在父級的中心。要將 svg 調整為文本，我們應該套用最小寬度和最小高度。

使用 JavaScript 的動畫邏輯

要在 javascript 中對元素進行動畫處理，我們可以使用精彩的 animate(keyframes, options) 方法。

關鍵影格

讓我們來剖析 getDrawingParameters 函數，它提供了要迭代的屬性：

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

首先，我們需要使用 svg 方法知道我們的路徑實際上有多長 getTotalLength:

const length = path.getTotalLength();

現在，我們應該使用計算出的長度來模擬繪圖。讓我們定義我們的起點。我們需要屬性 linesDasharray:

path.style.strokeDasharray = length;

在這裡，我們告訴這個屬性以一個破折號（大小=長度）和一個間隙（大小=長度）交替來繪製路徑。

下一個屬性，我們需要的長度是 lines-dashoffset:

path.style.strokeDashoffset = length;

此值表示破折號數組計算是按長度值拉動的。由於我們將破折號數組設定為“dash-length space-length dash-length space-length ...”，起始路徑將為空（間隙）。

因此，我們在數組中定義可迭代屬性：

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

我們使用 offset 來定義必須達到該屬性的相對時間。它是為了在每次迭代時模擬延遲。

選項

animate方法的第二個參數是options:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

我們將動畫設定為無限迭代和 10 秒持續時間。還記得偏移量嗎？我們的「活動」動畫只需要 1.5 秒。