此程式碼筆的靈感來自 Sten Hougaard 的作品
讓我們為不同的動畫實作建立兩個容器：
<div class="container"> <h1>Animated text <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg"> <path d="..."/> </svg> </h1> </div> <div class="container"> <h1 id="clickable-header">Click on me! <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg"> <path d="..."/> </svg> </h1> </div>
我用Adobe illustrator製作了svg，它的主要特點一定是高度小、寬度大。
值得一提的是，svg 是 header 元素的子元素，因為我們將相對於它定位 svg。
我們將容器轉變為彈性盒，以優雅地將所有內容放置在中心。
.container {
display: flex;
place-content: center;
}
h1 {
display: inline;
position: relative;
}
內聯用於簡單地將元素的寬度減小到其內容，因為 svg 將依賴它
接下來，我們應該相對於標題定位 svg：
svg {
min-width: 110%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
我們使用標準方法將相對元素定位在父元素的中心。要將 svg 調整為文本，我們應該套用 min-width 和 min-height。
要在 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;
在這裡，我們告訴這個屬性以一個破折號（大小=長度）和一個間隙（大小=長度）交替來繪製路徑。
下一個屬性，我們需要的長度是strike-dashoffset:
path.style.strokeDashoffset = length;
此值表示破折號數組計算是按長度值拉動的。由於我們將破折號數組設定為“dash-length、gap-length、dash-length、gap-length ...”，起始路徑將為空（間隙）。
因此，我們在陣列中定義可迭代屬性：
const drawingProperties = [
{ strokeDashoffset: length, easing: "ease-in" },
{ strokeDashoffset: 0, offset: 0.15 }
];
我們使用 offset 來定義必須達到該屬性的相對時間。它是為了模仿每次迭代的延遲。
animate 方法的第二個參數是選項：
animatedPath.animate(
getDrawingParameters(animatedPath),
{duration: 10000, iterations: Infinity}
);
我們將動畫設定為無限迭代和 10 秒持續時間。還記得偏移量嗎？我們的「活動」動畫只需要 1.5 秒。
以上是模仿用筆突出顯示文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！
