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

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

讓我們一起做！

SVG掩蔽

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

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

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

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

製作圖層

這個技巧的基礎(chǔ)是，我們實(shí)際上要創(chuàng)建兩個單獨(dú)的層，一個在另一個層上：

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

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

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

而且，像魔術(shù)一樣，字母變成了沿形狀的矢量點(diǎn)的輪廓。

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

注意單個字母如何有填充，但沒有中風(fēng)：

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

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

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

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

出口

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

SVG選項(xiàng)彈出窗口將打開，下面是此示例導(dǎo)出的首選設(shè)置。

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

當(dāng)我們與SVG合作時，有一些技巧需要考慮，以使其盡可能輕便，以表現(xiàn)出色：

1. 點(diǎn)越少，文件越輕。
2. 使用較小的查看框可以有所幫助。
3. 有很多工具可以進(jìn)一步優(yōu)化SVG。

手動編輯SVG代碼

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

有些事情值得做：

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

例如：

 <mask>
 
</mask>

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

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

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

 <svg xmlns="“" http: viewbox="“">
 <title>營銷實(shí)驗(yàn)室</title>
 <defs>
  <g>
   <mask>
    
   </mask>
  </g>
 </defs>
 <g>
  
 </g>
</svg>

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

 。面具 {
 填充：無；
 中風(fēng)：#fff;
}

動畫片

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

CSS和JavaScript

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

 / *設(shè)置“中風(fēng)”和“劃線” dashoffset */
。面具 {
 中風(fēng) -  dasharray：1000;
 中風(fēng)劃線：1000;
}
?
/ *動畫將衝程 - 劃線為零長度 */
@KeyFrames streoffset {
 到 {
  中風(fēng)劃線：0;
 }
}
?
/ *將動畫應(yīng)用於每個掩碼 */
＃mask-m {
 動畫：StrokeOffset 1S線性前進(jìn)；
}

JavaScript如果您希望使用該路線，可以幫助進(jìn)行計數(shù)：

 //將口罩放在數(shù)組中
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- $ {蒙版}`//預(yù)先＃bask-到每個掩碼元素名稱
 讓路徑= document.queryselector（id）
 const長度= path.getTotallength（）//計算路徑的長度
 PATH.STYLE.STROKEDASHARRAY =長度; //將長度設(shè)置為“樣式”
 PATH.STYLE.STROKEDASHOFFSET =長度; //將長度設(shè)置為在樣式中的中風(fēng)式dashoffset
}））

GSAP

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

這是其工作原理：

1. 在代碼中包括GSAP和DrawsVG腳本。
2. 最初使用自動藻類隱藏圖形。
3. 創(chuàng)建一個時間表。
4. 將自動α設(shè)置為圖形。
5. 以適當(dāng)?shù)捻樞驅(qū)⑺凶址窂矫砂鍵D添加到時間表中。
6. 使用drawsvg來動畫所有字符。

參考

1. 傑克·阿奇博爾德（Jake Archibald）在SVG中的動畫繪圖線
2. 創(chuàng)建Cassie Evans的徽標(biāo)動畫

以上是如何使用不規(guī)則的SVG筆觸獲得手寫動畫的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！