《SVG 動畫開發實戰》小冊發佈

年中的時候，花了點時間在 SVG 動畫開發學習上，通過不斷探索總結，結合本身學到的知識，以小冊子的形式沉澱下來一整套基於 SVG 進行動畫開發的實踐方法，我把它命名爲《SVG 動畫開發實戰》。

小冊介紹

現在的 Web 頁面動畫的實現方式有不少種解決方案，好比使用原生 CSS3 Animation、使用 SVG SMIL Animation，甚至是使用各類社區免費的類庫，像比較流行的 animate.js、GreenSock、但這些類庫最底層的實現方式仍然脫離不開原生的支持。

因此學好 Web 動畫開發，咱們仍需搞清楚如何使用原生進行動畫開發，再去讓類庫幫助咱們擴展豐富的動畫表現形式。

此係列不討論如何使用 CSS3 進行動畫開發，只專一於有關 SVG 的動畫開發，探究 SVG 開發常見動畫的原理，站在巨人的肩膀上，藉助 GreenSock Animation Platform（GSAP） 進行豐富的動畫開發。

這個系列在開始前，先來看看咱們須要瞭解的知識，SVG、SVG SMIL Animation、CSS Animation、GreenSock。

💡 此係列適合瞭解基礎 CSS 屬性，以及 SVG 基礎知識的小夥伴食用

小冊目錄

小冊涵蓋了 「描邊動畫」、「路徑動畫」、「變形動畫」、「蒙版動畫」、「閃爍動畫」、「圖案動畫」 等案例，分爲十個章節進行講解，經過 「30+」 可交互的在線示例講解動畫實現原理。最後經過結合 Vue 框架，上手集成 GSAP 完成在項目中使用 GSAP 開發動畫的實踐。

序號	章節	狀態
1	📋 SVG 基本介紹	截稿
2	📃 SVG 文件輸出	截稿
3	🚀 SVG 文件優化	截稿
4	🪀 使用 GreenSock 製做動畫	截稿
5	✏️ SVG 描邊動畫（Stroke）	截稿
6	〰️ SVG 路徑動畫（Path）	截稿
7	⭐ SVG 變形動畫（Morphing）	截稿
8	✨ SVG 閃爍動畫（Blink）	截稿
9	🖼️ SVG 圖案動畫（Pattern）	截稿
10	🤟 Vue + GSAP 實戰	截稿

小冊資源

🔮 小冊全部線上 Demo 整合在 CodePen Collection 中 《SVG Animation Best Practices》

Notion 版本

此小冊是在 Notion 上完成撰寫的，因此我保留了 Notion 的分享版本，你也能夠點擊這裏查看。

GitHub 版本

小冊提供了 GitHub 版本的在線閱讀體驗，傳送門

微信公衆號版本

關注個人技術公號，一樣也能夠找到此小冊系列，目前在更新中。。。