SVG Animation

小册介绍

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

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

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

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

TIP

💡 此系列适合了解基础 CSS 属性,以及 SVG 基础知识的小伙伴食用

小册目录

序号章节状态
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 的分享版本,你也可以点击这里查看。

微信公众号版本

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

xlbd