網站最後更新日期:2018年8月29日
歡迎大家來到暢想資源 AREFLY.COM! 個人網站 讚好Facebook 追隨Twitter 關注微博
關注微信公眾號
捐款 更多聯絡方式
×

利用純SVG+CSS keyframes animation動畫實現手寫毛筆字(書法)效果

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

預覽

「暢想資源」個人網站首頁: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文件。

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

本文所用的原始SVG文件:(下載自書法迷;書法家:黎簡)

二、切分每一筆畫

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

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

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

(注意現在右下角只有兩個圖層了)

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

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

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

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

(注意現在右下角的圖層;圖層倒序排後在SVG源文件中筆畫便能正序排,方便我們進行下一步)

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)加入一個 !importantanimation-timing-function 來修改動畫的細節速度,比如可調整為 ease-inease-outlinear等等。詳細請參見:CSS animation-timing-function Property

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

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

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

參考資料

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添加評論表情包(37條評論)

覺得這篇文章有用嗎?分享一下讓更多人受益吧!

為繼續支持本站繼續寫出優質文章,歡迎捐款!

© 版權聲明:本文章採用「姓名標示-非商業性-相同方式分享 4.0 國際(CC BY-NC-SA 4.0)」於「」發布,轉載時須以相同方式發布並註明「原文鏈接」!

本文固定鏈接:https://www.arefly.com/zh-tw/svg-and-css-keyframes-calligraphy-animation/

本文章由「超級efly」於2018年06月29日發表於「網路」分類

你可以發表評論,並在保留原文地址及作者的情況下引用到你的網站

轉載請註明:利用純SVG+CSS keyframes animation動畫實現手寫毛筆字(書法)效果 | 暢想資源

關鍵字:, , , , ,

利用純SVG+CSS keyframes animation動畫實現手寫毛筆字(書法)效果:目前有 16 條留言
訪客以 16:0 大幅領先博主

評論載入中,請稍等……
  1. 15樓
    搜程快排系統 China Google Chrome Windows

    這個是新技術了,值得學習一下

    [回復]
  2. 14樓
    Lundy China Google Chrome Windows

    哇,真的很牛。謝謝分享

    [回復]
  3. 13樓
    搜程快排系統 China Google Chrome Windows

    厲害的,這樣的css 太強大了

    [回復]
  4. 12樓
    Charles China Safari iPhone

    好久沒來,發現手機端訪問的樣子不一樣了嘿嘿

    [回復]
  5. 11樓
    頭條 China Google Chrome Windows

    文章不錯非常喜歡

    [回復]
  6. 10樓
    阿里下拉寶 China Google Chrome Windows

    這個css 效果不錯的

    [回復]
  7. 9樓
    阿里下拉寶 China Google Chrome Windows

    很不錯的毛筆法了,支持一下代碼

    [回復]
  8. 8樓
    ACG資源 China Google Chrome Windows

    還沒學到過!

    [回復]
  9. 好文章 支持下

    [回復]
  10. 6樓
    盛豐機械 China QQ瀏覽器 Windows

    非常好的文章,支持一下

    [回復]
  11. 5樓
    百萬鏈 China Google Chrome Windows

    有幸訪問到貴站,「百萬鏈」期待你的加入!

    [回復]
  12. 好文章 支持一下

    [回復]
  13. 地板
    BigCat China Google Chrome Windows

    竟然更新了

    [回復]
  14. 板凳
    網上購物 China Google Chrome Windows

    css也這麼強大? :?:

    [回復]
  15. 沙發
    以太坊學習 China Google Chrome Windows

    自動動手,豐衣足食。

    [回復]

發表評論



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter