十分钟教你用 svg 做出精美的动画！

摘自：前端大全

以下文章来源于前端进阶之路，作者三余

前言

经常在 Codepen 上看到大侠们用 SVG 画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对 SVG 有足够透彻的了解，并且自己画出那些 SVG 图案，才有办法让他动起来。

但其实不然，今天教大家一个简单的小技巧，让你快速实现一个 svg 动画！

打开 Codepen ，点击界面中的 build 按钮，就可以使用动画构建一个房子，并且让它升起寥寥炊烟！🏭

示例： https://codepen.io/johnYu243/pen/bGBVEwv

寻找精美的 svg 图案

既然自己画不出来，那我们就去找线程的库， svg 库有很多，如 Flation、iconFont、Iconfinder 或 icons8 等网站会提供很多免费的 svg 图案。

分析 svg 图案

打开 devtool 观察 svg 图案，你会看到下面的结果：

element 里头 path 跟 circle 都是 svg 的 DOM元素，分别表示 svg 图案内的线条与圆形。

举个例子：

<path d="M 10 25
      L 10 75
      L 60 75
      L 10 25">

上面代码中的 d 的内容： M 代表将笔移动到（10,25），接着L画一条线到（10,75），最后回到起点画一个三角形。

通过 devtool，我们可以看到每个 path 对应图案的哪个部分：

这时候应该形成思路，既然我们可以知道每个元素对应到图案的哪个部分，我们就可以针对想要套上动画的DOM元素来操作！

TimelineLite/TimelineMax 工具

如果单纯通过 id 、className 来使用 CSS 或 JavaScript 自行处理动画，难度还是颇高，更重要的是，要耗费大量的时间

所以我们得借用工具，Timeline(Lite/Max) 跟 TweenMax 是知名的 GreenSock Animation Platform （简称GSAP）推出的可创建时间轴（timeline）作为动画或其他时间轴的容器，这使得整个动画控制和精确管理时间变得简单。

GSAP 甚至为我们提供了 Ease Visualizer 来展示每种 Ease function 的效果，更顺带附上代码：

https://codepen.io/johnYu243/pen/jOVbMzX

上手 GSAP

GSAP 的 API 功能十分强大，还有相关社区：官方文档、论坛、TimelineMax中文手册

在一开始的房子构建例子中。我主要使用的是 TimelineMax 的 from 与 sferFrom ，这两个API只需要设定初始值，他会在指定时间内将补间动画完成：

t1.from("#House > rect:nth-child(24)", 1, {
	scaleX: 0,
	transformOrigin: "center",
	ease: Power2.easeOut
})

这一步我们将CSS Selector #House > rect:nth-child(24) 这个元素，从 scaleX 为0开始，以center(中心)为变形起点，利用 Power2.easeOut ，在一秒内回复到原始状态，并执行补间动画。

.staggerFrom(
	["#House > path:nth-child(34)", "#House > path:nth-child(32)"],
	0.8,
	{
		scaleY: 0,
		transformOrigin: "bottom",
		ease: Bounce.easeOut,
		stagger: 0.2
	},
	0,
	"scene1+=0.5"
)

与 from 相似，只是 staggerFrom 可以一次放入多个 CSS Selector ，用 agger 这个属性来设置数组中的 Selector 要以怎样的时间差出现。

详细API参数可以参考官方文档

接着回到我们的 SVG，在 devtool 的帮助下，要取出 svg 内部元素的 CSS Selector 非常容易，在 element 面板中找到对应的DOM元素点击右键，选择 Copy -> Copy selector ，就可以直接复制到该元素的 CSS Selector：

现在我们能取得 svg 中任意部分的 CSS Selector ，也知道怎么用 GSAP API 来进行补间动画，现在是时候将其结合起来！

我们先调整下基本布局，一般在空白 Html 内直接放入 svg 时，图案大多会紧靠页面左上角，我们可以套用个 margin:0 auto； 将其置中，看起来会顺眼一些，你也能额外加些 padding。我们在页面添加一个按钮来调用动画：

<!-- html part -->
<button onclick="animateBack()"> Build!</button>

<!-- css part -->
<style>
#Capa_1{
	margin: 0 auto;
	display: block;
	width: 256px;
	height: 100%;
}
</style>

接着我们使用 TimelineMax 提供的 staggerFrom 函数，利用 devtool 将滑板车的轮子部分找出来，复制它们的 CSS Selector ，放入 staggerFrom 函数参数中，设定 x 与 y 轴的 scale 都从0开始，由 center 增长，采用 Bounce.easeOut 的 ease function ， 而四个 Selector 间以 stagger: 0.2 的属性值作为补间动画出现的时间差：

const t1 = new TimelineMax();
t1.staggerFrom(
	[
		"#Capa_1 > g > path:nth-child(1)",
		"#Capa_1 > circle:nth-child(7)",
		"#Capa_1 > path:nth-child(6)",
		"#Capa_1 > circle:nth-child(5)"
	],
	1,
	{
		scaleY: 0,
		scaleX: 0,
		transformOrigin: "center",
		ease: Bounce.easeOut,
		stagger: 0.2
	}
)

简单几行代码，就能让我们的滑板车动起来！

https://codepen.io/johnYu243/pen/poNjNzz

补间是一个属于，用于描述逐帧序列，有时也称为“中间”。在那个地方，一个动作导致下一个动作产生一个流畅的动作。

完善动画

你可以把 TimelineMax 想象成时间轴，动画按指定顺序执行，而 staggerFrom 则可以同时让多个 DOM 元素以微小时间差的顺序启动，另外我们还可以设置一些 Flag 来指定要等到哪几个动画完成后，才接续其他动画。

最后，发挥自己的创意，使用各种 API 打出一套组合拳：

https://codepen.io/johnYu243/pen/yLVYVey