如何使用SVG的Dash動畫創造手繪文字動畫效果？

如何使用 SVG 在網頁上製作手寫文字動畫？

問題陳述：

您正在嘗試對儲存為SVG 的文字進行動畫處理，但您只能夠為筆畫設定動畫，但這不是所需的效果。您希望實現類似於給定範例的動畫，從而創建手繪外觀。這是您到目前為止所擁有的：

代碼示例：

<div>
<pre class="brush:php;toolbar:false">.test {
  width: 300px;
}

.l1 {
  animation: dash 15s 1;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation-fill-mode: forwards;
}

.l2 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 20s linear forwards;
  animation-delay: 1s;
}

.l3 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 2.5s;
}

.l4 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 25s linear forwards;
  animation-delay: 4.5s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

答案：

動畫您想要實現的目標使用標準的破折號動畫技術，但使用類似於手繪風格。

Dash動畫技術：

標準線，例如：

<path d="M 10,75 L 290,75" stroke="red" stroke-width="50"></path>

透過控制值來動畫關鍵影格中的Stroke-DashArray和Stroke -DashOffset動畫。

.path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 15s 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

在此範例中，Stroke-dasharray 屬性定義了路徑上的虛線和間隙的長度，Stroke-dashoffset 定義了路徑內虛線的偏移量。隨著動畫從 0% 進展到 100%，筆畫短劃線偏移值會減少，導致虛線沿著路徑逐漸出現。

建立手繪外觀：

要使用輪廓剪輯動畫筆劃，需要使用一個附加的 SVG 路徑以及與動畫筆劃的寬度和顏色相匹配的筆劃。此輪廓路徑應覆蓋動畫筆畫將佔據的整個區域。透過將輪廓的描邊線連接屬性定義為斜接，創建了尖角樣式，給人一種手繪線條的印象。