经常在codepen上看到大侠们用svg画出不可思议的动画，我一直很好奇他们是怎么运作的，总觉得这需要对svg有足够透彻的了解，并且自己画出那些svg图案，才有办法让他动起来。
但其实不然，今天教大家一个简单的小技巧，让你快速实现一个svg动画！
打开codepen，点击界面中的build按钮，就可以使用动画构建一个房子，并且让它升起寥寥炊烟！
演示地址：https://codepen.io/johnyu243/pen/bgbvewv
寻找精美的svg图案既然自己画不出来，那我们就去找现成的库，svg库有很多，如flaticon、iconfont、iconfinder或icons8等网站会提供很多免费的svg图案。
分析svg图案打开devtool观察 svg 图案，你会看到下面的结果：
element里头path跟circle都是svg的dom元素，分别表示svg图案内的线条与圆形。
举个例子：
9b54c3b13e854de55d19717b26e3ccae
上面代码中的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
简单几句代码就能达到如下效果：
上手gsapgsap的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。我们在页面添加一个按钮来调用动画：
<!--html part--><button onclick="animatebike()"> 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 tl = new timelinemax(); tl.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
结论看到这里，跃跃欲试了吗？
总之，我自己觉得蛮有趣的，希望或多或少对读到这篇文章的人有点帮助。
最后给大家分享一个很酷的demo，来自我的文章封面
参考文章greensock animation platform
how to create beautiful svg animations easily
更多编程相关知识，请访问：编程教学！！
以上就是快速使用svg画出精美动画！的详细内容。