相信大家在Flash時代見過很多通過Flash動畫模擬毛筆書寫效果的教程，但在Flash早已停止被支持的今天，“暢想資源”便來教教大家如何通過SVG和CSS動畫簡單實現動畫書寫毛筆字效果，讓訪客在移動設備和不支持Flash的瀏覽器（即現今絕大多數瀏覽器 ）中也一樣能看到毛筆字書寫效果，為你的網站加入中國傳統文化色彩。

預覽

“暢想資源”個人網站首頁：https://www.hesyifei.com/（或點擊下方“Run”按鈕預覽）

See the Pen 利用純SVG+CSS keyframes animation動畫實現手寫毛筆字（書法）效果：預覽 by Yifei He (@hesyifei) on CodePen.

一、準備毛筆字SVG源文件

1、既然要利用純SVG+CSS動畫實現動畫書寫毛筆字效果，我們當然首先需要一個以SVG路徑（path）形式保存的毛筆字文件。

我們在這裡將使用“書法迷”網站上所提供的SVG文件，大家亦可自行於紙上寫完毛筆字後掃描，再將每筆的邊緣轉換為閉合路徑並存為SVG文件。

提示：本文中為方便期間將只使用一個字（“非”）來進行教程，實際操作中可以同樣方法使用更多字來製成整個動畫（參見上方預覽動畫的原始碼）。

二、切分每一筆畫

1、接下來我們需要將毛筆中每一筆畫單獨切分開來。

我們本文中將使用Adobe Illustrator CC做示範，但你也可以使用你熟悉的其它SVG工具達成相同效果。

2、首先我們可以把所有背景刪除，再把所有圖層都移動到根部，這樣可以避免SVG中保有任何 g transform 等標籤，使得所有路徑都清楚地保存在SVG文件中，讓之後的步驟更加順利。

3、接着我們便可以正式開始切割筆畫了，“暢想資源”找到AI中一個比較方便的“美工刀”（Knife），但大家也可能有更快更方便的方法。這裡“暢想資源”就不詳細介紹如何使用“美工刀”，可自行尋找AI相關教程。

4、對於沒有重疊的筆畫來說（即字中其它筆畫不會碰到這一筆畫，比如下圖中“非”字的右半部份的筆畫），切割十分簡單，只需要將兩個部分分開來即可。

5、對於有重疊部分的筆畫來說（即字中其它筆畫會重複覆蓋這一筆畫，比如下圖中的“非”字的左下角那一個筆畫），切割時就需要先複製（duplicate）那一圖層，然後再想辦法把兩個重疊的筆畫分開切割，從而讓各自都能保留一個完整的筆畫。

6、切割完成後，將每個圖層命名為可以理解的名字，比如“非”的第一筆可以被叫做“fei-1”。

7、用純文字編輯器打開SVG文件，檢查是否整個文件是否只剩下 path 標籤，沒有 g 等其它標籤（style 標籤可以保留），如有問題請參見上方第2步。

三、加入筆序路徑

1. 在切割完成後，我們還需要讓電腦知道他該按照什麼路徑、什麼順序來播放每一筆筆畫。

2. 首先，選取“鉛筆工具”（Pencil Tool），記得在頂部把這個path的顏色調為“無”（即透明）。

3. 然後依照毛筆手寫時的筆序和方向，分別畫出每個筆畫的路徑，這一路徑應在那筆筆畫的正中間。

注意：這一路徑最好在起點可超出最初有墨的地方，否則最後顯示時那一筆的第一點將突然出現而不是漸漸加入。

提示：如果這一筆畫屬於剛剛“二-5”步中有重疊部分的筆畫，也記得將筆畫當作單獨的兩筆來處理。

4. 將新加入的每個圖層（即每個路徑）命名為可以理解的名字，比如“非”的第一筆筆序可以被叫做“line-fei-1”。

四、製作並調試動畫

1、首先，我們可創建一個HTML和一個CSS文件。注意SVG源代碼一定要保存在HTML頁內（即inline使用），而非作為單獨文件儲存並使用img加入。

2、我們要將每一個筆序（即上方第三部分做出的以“line-”開頭的一堆開放路徑）放入一個SVG代碼的根中，並給每個路徑加入 class="pen line-fei-1" （這裡“line-fei-1”是你那一筆序的名稱）（代碼是下方代碼的2至12行）

2、再將每一筆畫（即上方第二部分做出的一堆封閉的路徑）加入SVG defs 內的每個 clipPath 中。clipPath 的ID便是你筆畫的名稱（比如“fei-1”）（代碼是下方代碼的14至67行）

5、然後我們需要依次找出每個筆序的 stroke-dasharray 長度。暫時將每個筆畫的相應長度記錄下來即可。

在這裡“暢想資源”為大家準備了一個工具，只需於下方（先點擊右上角的“Edit on CodePen”）將你那個一個筆畫的path路徑粘貼進去並慢慢修改CSS中的 stroke-dasharray，直到那一筆畫剛好顯示完（即當 stroke-dasharray 加1時，筆畫無變化；當 stroke-dasharray 減1時，筆畫長度有減少）。

See the Pen 利用純SVG+CSS keyframes animation動畫實現手寫毛筆字（書法）效果：尋找stroke-dasharray by Yifei He (@hesyifei) on CodePen.

使用方法：

可以用類似以下的方法記錄結果：

6、再接着我們便開始加入CSS keyframes動畫了。

首先，創建一個 .pen 的class，其中 stroke 可修改為你想要的顏色，而 stroke-width 之後可能會需要進行微調（見第“五-2”步），animation-duration 則決定了你整個動畫將要進行的時間，其它animation- 開頭的選項也可進行修改（詳細見相關文檔）。

7、加入每一筆序相應的class。clip-path 里是你SVG defs 中那一筆畫的ID，stroke-dasharray 是你剛剛第5步為這一筆序中測試並記錄下來的數字。animation-name 是之後步驟中將會加入的你這一筆序動畫的名稱。

8. 將所有筆序都加入完成後，便可開始加入CSS keyframes。0%時那個 stroke-dashoffset 和你上方該筆序的 stroke-dasharray 是同一個值，每個動畫中上方的百分比代表開始時時間（即你第6步中設置的 animation-duration）的百分比，下方的百分比代表結束時時間的百分比。

9、現在嘗試訪問你的網頁，應該整體動畫流程都已成形，接下來便可開始微調和優化部分。

See the Pen 利用純SVG+CSS keyframes animation動畫實現手寫毛筆字（書法）效果：“非”字初步預覽 by Yifei He (@hesyifei) on CodePen.

五、微調與優化

1、首先，嘗試不同的keyframes時間百分比以找到你覺得最好的每個筆畫的書寫時間。

2、其次，打開瀏覽器的開發者工具，嘗試定位並修改 .pen class中 stroke-width 值，看看會不會因為這個值調大了而顯示了更完整的筆畫。如果是可嘗試於CSS中進行修改並查看效果。

3、可嘗試於每個筆序class中（比如 .line-fei-1）加入一個 !important 的 animation-timing-function 來修改動畫的細節速度，比如可調整為 ease-in、ease-out、linear等等。詳細請參見：CSS animation-timing-function Property

4、加入各個瀏覽器的prefix，比如一個筆畫的動畫可能需要加入以下瀏覽器prefix：

4、但很明顯那樣加起來會太過複雜了，所以推薦使用less等其它工具來簡化代碼。以下是“暢想資源”自己用less寫出的一個簡化版本，可供參考：

5、歡迎提供更多意見...

參考資料

Sign on the Dotted Line: Animating Your Own SVG Signature

How to animate handwriting text on the web page using SVG?（特別感謝這一回答，它是網上很少幾個解答了如何在動畫中顯示路徑上的clipPath而非路徑本身的問題，才讓我們可以實現動畫中最重要的一部分）

文中GIF教程動畫使用LICEcap製作，並參考“Optimizing Animated GIFs by Converting to HTML5 Video”轉換為HTML5 MP4視頻。

本文的英文版本已發表於本站的英文部落格上。

歷史上的今天

2013年：給WordPress添加評論表情包（38條評論）

Facebook分享

Twitter分享