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

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

讓我們一起做！

SVG掩蔽

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

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

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

這個(gè)想法是在我們要?jiǎng)赢嫷耐痪渥又袆?chuàng)建一個(gè)，然后將其放在句子的頂部。換句話說(shuō)，將有兩層相同的句子。由于面具位于頂部，我們將其使其白色，因此它將隱藏在其下方的原始句子。我們將對(duì)掩碼進(jìn)行動(dòng)畫化，以便在動(dòng)畫運(yùn)行時(shí)揭示底層。

制作圖層

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

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

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

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

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

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

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

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

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

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

為每個(gè)字母創(chuàng)建一個(gè)掩碼，并記住對(duì)這些層使用好名字。絕對(duì)可以重復(fù)使用面具，那里有一個(gè)以上的字母之一 - 無(wú)需一遍又一遍地重新繪制相同的“ A”角色。

出口

接下來(lái)，我們需要導(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ì)，高效的代碼方面做得非常出色。其他人，不是很多。無(wú)論哪種方式，最好在代碼編輯器中打開文件

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

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

手動(dòng)編輯SVG代碼

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

有些事情值得做：

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

例如：

 <mask>
 
</mask>

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

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

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

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

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

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

動(dòng)畫片

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

CSS和JavaScript

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

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

JavaScript如果您希望使用該路線，可以幫助進(jìn)行計(jì)數(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-到每個(gè)掩碼元素名稱
 讓路徑= document.queryselector（id）
 const長(zhǎng)度= path.getTotallength（）//計(jì)算路徑的長(zhǎng)度
 PATH.STYLE.STROKEDASHARRAY =長(zhǎng)度; //將長(zhǎng)度設(shè)置為“樣式”
 PATH.STYLE.STROKEDASHOFFSET =長(zhǎng)度; //將長(zhǎng)度設(shè)置為在樣式中的中風(fēng)式dashoffset
}））

GSAP

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

這是其工作原理：

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

參考

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

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