年中的时候，花了点工夫在 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 版本的在线浏览体验，传送门
微信公众号版本
关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。