如何使用 SVG 製作手寫文字動畫：Dasharray、Dashoffset 和 Masking？

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

目標

在本指南中，我們將深入研究動畫SVG 文字以使其類似手寫的誘人效果。我們將探索受範例動畫啟發的技術，例如發現的技術這裡：

• https://codepen.io/se7ensky/pen/waoMyx
• https://codepen. io/munkholm/pen/EaZJQE

實現

為了實現這種迷人的手寫效果，我們將偏離僅對文本筆畫進行動畫處理的標準方法。相反，我們將從前面提到的特殊動畫中汲取靈感。

技術 1：

• 對路徑的描邊 dasharray 和描邊 dashoffset 屬性進行動畫處理。
• 用所需手繪的輪廓剪輯動畫筆畫

JavaScript代碼：

const path = document.querySelector('.text');

path.style.animation = 'dash 15s 1 forwards';
path.style.strokeDasharray = '300';
path.style.strokeDashoffset = '300';

CSS：

.text {
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

技術2:

• 使用手繪形狀的輪廓創建蒙版。
• 沿路徑動畫遮罩的位置。

JavaScript程式碼：

const mask = document.querySelector('.mask');

mask.style.animation = 'mask-move 15s 1 forwards';

CSS：

.mask {
  mask: url(#mask);
  -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
  animation-delay: 1s;
}

CSS：

<defs>
  <mask>

CSS：

CSS：

• CSS：

CSS：

CSS：

CSS>CSS遮罩：附加註意：自訂動畫時序和路徑以滿足您的特定需求。 嘗試不同的繪畫風格，以實現獨特的手繪效果。 使用高解析度SVG 來保留文字或內容的複雜細節現場示範：在CodePen 上查看互動式：

以上是如何使用 SVG 製作手寫文字動畫：Dasharray、Dashoffset 和 Masking？的詳細內容。更多資訊請關注PHP中文網其他相關文章！