如何使用不規則的SVG筆觸獲得手寫動畫

我想為書法字體做一個手寫動畫，這種單詞像被看不見的筆一樣動畫。由於書法字體的中風寬度不均勻（實際上它們甚至不是SVG的中風），因此使用典型的路徑動畫技術來做這種事情幾乎是不可能的。但是我發現SVG屏蔽的創新應用可以在幾分鐘內實現這種影響。

在研究如何執行此操作時，我從多個來源收集了信息。我將它們結合在一起，並能夠創建最終效果。

讓我們一起做！

SVG掩蔽

如果一個單詞或句子中所有字母的中風寬度都遍布，那麼Craig Roblewsky可以使用手寫動畫。這是一種巧妙的技術，可以使SVG卒中 - 劃線和中風 - 扣除屬性動畫。

書法字體像我們想在這裡動畫的字體在整個字母中都具有不平衡的中風寬度，因此，它需要是，並以這種方式對其進行動畫操作。訣竅是使用SVG掩碼。

首先，讓我們弄清楚要使用的字體。在本文中我將使用的是Hasheartone，它具有不錯的筆觸，非常適合筆跡。

這個想法是在我們要動畫的同一句子中創建一個，然後將其放在句子的頂部。換句話說，將有兩層相同的句子。由於面具位於頂部，我們將其使其白色，因此它將隱藏在其下方的原始句子。我們將對掩碼進行動畫化，以便在動畫運行時揭示底層。

製作圖層

這個技巧的基礎是，我們實際上要創建兩個單獨的層，一個在另一個層上：

1. 底層是帶有所需字體的單詞（在我的情況下是hasheartone）。
2. 頂層是近似單詞的手工製作路徑。

創建手工的路徑並不像您想像的那樣難。我們需要一條連續的途徑來動畫和揭示句子。這意味著對此沒有。但是，許多說明應用程序（包括插圖畫家）可以將字母轉換為路徑：

1. 選擇單詞。
2. 打開“屬性”面板，然後單擊“創建大綱” 。

而且，像魔術一樣，字母變成了沿形狀的矢量點的輪廓。

在這一點上，將有意義的名稱賦予這些路徑非常重要，這些路徑被存儲為層。當我們期望SVG時，該應用將生成代碼，並將這些圖層名稱用作ID和類。

注意單個字母如何有填充，但沒有中風：

在SVG中，我們可以按照自己想要的方式對中風進行動畫動畫，因此我們需要將其作為第二個主層，即蒙版。我們可以使用筆工具跟踪字母。

1. 選擇筆工具。
2. 將填充選項設置為“無”。
3. 中風寬度將取決於您使用的字體。我將衝程寬度選項設置為5px，並將其顏色設置為黑色。
4. 開始繪畫！

我的筆工具技能不佳，但這沒關係。重要的不是完美，而是掩蓋了下面的層。

為每個字母創建一個掩碼，並記住對這些層使用好名字。絕對可以重複使用面具，那裡有一個以上的字母之一 - 無需一遍又一遍地重新繪製相同的“ A”角色。

出口

接下來，我們需要導出SVG文件。這可能取決於您使用的應用程序。在Illustrator中，您可以使用文件→導出→導出為→SVG

SVG選項彈出窗口將打開，下面是此示例導出的首選設置。

現在，並非所有應用程序都以相同的方式導出SVG。有些在生成纖細，高效的代碼方面做得非常出色。其他人，不是很多。無論哪種方式，最好在代碼編輯器中打開文件

當我們與SVG合作時，有一些技巧需要考慮，以使其盡可能輕便，以表現出色：

1. 點越少，文件越輕。
2. 使用較小的查看框可以有所幫助。
3. 有很多工具可以進一步優化SVG。

手動編輯SVG代碼

現在，並非所有應用程序都以相同的方式導出SVG。有些在生成纖細，高效的代碼方面做得非常出色。其他人，不是很多。無論哪種方式，最好在代碼編輯器中打開文件並進行一些更改。

有些事情值得做：

1. 給出設置為最終設計大小的
2. 使用
3. 可能會有基於Illustration App中命名的層的ID的組元素（）。在這個特定的演示中，我有兩個小組元素：＃營銷利潤（大綱）和＃營銷口罩（蒙版）。將蒙版移動到元素中。這將在視覺上隱藏它，這就是我們想要的。
4. 口罩組內部可能會有路徑。如果是這樣，請繼續並從中刪除轉換屬性。
5. 將每個路徑元素包裹在中，並給它們一個.mask類和一個ID，以指示哪個字母掩蓋。

例如：

 <mask>
 
</mask>

在輪廓組（我給出了＃Marketing-LAB的ID）內部，將掩碼應用於相應的字符路徑元素，並使用Mask =“ url（＃bask-marketing-m）”。

 <g>
 <path mask="“" url d="“" m427></path>
</g>

這是使用上述所有修改的一個字符的代碼：

 <svg xmlns="“" http: viewbox="“">
 <title>營銷實驗室</title>
 <defs>
  <g>
   <mask>
    
   </mask>
  </g>
 </defs>
 <g>
  
 </g>
</svg>

最後，我們將為.mask元素添加CSS，該元素覆蓋了用白色覆蓋筆劃的顏色，因此它與文檔的背景顏色相對於文檔的背景顏色隱藏。

 。面具 {
 填充：無；
 中風：#fff;
}

動畫片

我們將對CSS衝程 - 戴式屬性屬性進行動畫動畫，以獲取連續的線揭示效果。我們可以使用CSS和Javasscript或Greensock（GSAP）進行動畫。我們將研究兩種方法。

CSS和JavaScript

僅在CSS中執行此操作是非常簡單的。您可以使用JavaScript來計算路徑長度，然後使用返回的值對其進行動畫化。如果您根本不想使用JavaScript，則可以計算一次路徑長度，然後將該值進行硬編碼到CSS中。

 / *設置“中風”和“劃線” dashoffset */
。面具 {
 中風 -  dasharray：1000;
 中風劃線：1000;
}


/ *動畫將衝程 - 劃線為零長度 */
@KeyFrames streoffset {
 到 {
  中風劃線：0;
 }
}


/ *將動畫應用於每個掩碼 */
＃mask-m {
 動畫：StrokeOffset 1S線性前進；
}

JavaScript如果您希望使用該路線，可以幫助進行計數：

 //將口罩放在數組中
const masks = ['m'，'a'，'r'，'k-1'，'k-2'，'e'，'t line-v'，'t-line-h'，'i-dot'，i-dot'，i-dot'，n'，'n'，'g'，'lab-l'，'lab-l'，'lab-a'，'lab-a'，'lab b'，'lab-b']，'lab b']


masks.foreach（（蒙版，索引，el）=> {
 const ID =`#mask- $ {蒙版}`//預先＃bask-到每個掩碼元素名稱
 讓路徑= document.queryselector（id）
 const長度= path.getTotallength（）//計算路徑的長度
 PATH.STYLE.STROKEDASHARRAY =長度; //將長度設置為“樣式”
 PATH.STYLE.STROKEDASHOFFSET =長度; //將長度設置為在樣式中的中風式dashoffset
}））

GSAP

GSAP具有一個drawsvg插件，可讓您逐步揭示（或隱藏）SVG ，，，，，，或。在引擎蓋下，它使用了CSS衝程儀表式和中風劃線屬性。

這是其工作原理：

1. 在代碼中包括GSAP和DrawsVG腳本。
2. 最初使用自動藻類隱藏圖形。
3. 創建一個時間表。
4. 將自動α設置為圖形。
5. 以適當的順序將所有字符路徑蒙版ID添加到時間表中。
6. 使用drawsvg來動畫所有字符。

參考

1. 傑克·阿奇博爾德（Jake Archibald）在SVG中的動畫繪圖線
2. 創建Cassie Evans的徽標動畫

以上是如何使用不規則的SVG筆觸獲得手寫動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！