年中的时候，花了点时间在 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 的分享版本，你也可以点击这里查看。
小册提供了 GitHub 版本的在线阅读体验，传送门
关注我的技术公号，同样也可以找到此小册系列，目前在更新中。。。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。