模仿用筆突出顯示文本

此程式碼筆的靈感來自 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。

CSS

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

.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 的動畫邏輯

要在 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中文網其他相關文章！