小编给大家分享一下如何使用svg画出精美动画，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站是专业的陵城网站建设公司，陵城接单;提供网站建设、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行陵城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
经常在Codepen上看到大侠们用SVG画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对SVG有足够透彻的了解，并且自己画出那些SVG图案，才有办法让他动起来。
但其实不然，今天教大家一个简单的小技巧，让你快速实现一个svg动画！
打开Codepen，点击界面中的build按钮，就可以使用动画构建一个房子，并且让它升起寥寥炊烟！
既然自己画不出来，那我们就去找现成的库，svg库有很多，如Flaticon、iconfont、Iconfinder或icons8等网站会提供很多免费的svg图案。
打开devtool观察 svg 图案，你会看到下面的结果：
element里头path跟circle都是svg的DOM元素，分别表示svg图案内的线条与圆形。
举个例子：
上面代码中的d的内容：M代表将笔移动到(10, 25)，接着L画一条线到(10, 75)，最后回到起点画出一个三角形。
通过devtool，我们可以看到每个path对应图案的哪个部分：
这时候应该形成思路，既然我们可以知道每个元素对应到图案的哪个部分，我们就可以针对想要套上动画的DOM 元素来操作！
如果单纯通过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的API功能十分强大，还有相关社区：官网文档、论坛、TimelineMax中文手册
在一开始的房子构建例子中，我主要使用的是TimelineMax的from与staggerFrom，这两个API只需要设定初始值，他会在指定时间内将补间动画完成：
tl.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，用stagger这个属性来设置数组中的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。我们在页面添加一个按钮来调用动画：
