December 15, 2020

《SVG 动画开发实战》小册发布

#SVG #Animation

SVG_Animation.gif

年中的时候,花了点时间在 SVG 动画开发学习上,经过不断探索总结,结合自己学到的知识,以小册子的形式沉淀下来一整套基于 SVG 进行动画开发的实践方法,我把它命名为《SVG 动画开发实战》。

# 小册介绍

如今的 Web 页面动画的实现方式有很多种解决方案,比如使用原生 CSS3 Animation、使用 SVG SMIL Animation,甚至是使用各种社区免费的类库,像比较流行的 animate.jsGreenSock、但这些类库最底层的实现方式仍然脱离不开原生的支持。

所以学好 Web 动画开发,我们仍需搞清楚如何使用原生进行动画开发,再去让类库帮助我们扩展丰富的动画表现形式。

此系列不讨论如何使用 CSS3 进行动画开发,只专注于有关 SVG 的动画开发,探究 SVG 开发常见动画的原理,站在巨人的肩膀上,借助 GreenSock Animation Platform(GSAP) 进行丰富的动画开发。

这个系列在开始前,先来看看我们需要了解的知识,SVGSVG SMIL AnimationCSS AnimationGreenSock

💡 此系列适合了解基础 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 版本的在线阅读体验,传送门

# 微信公众号版本

关注我的技术公号,同样也可以找到此小册系列,目前在更新中。。。

xiaoluoboding