前言

常常在Codepen上看到大侠们用SVG画出不堪设想的动画，我始终很好奇他们是怎么运作的，总感觉这须要对SVG有足够透彻的理解，并且本人画出那些SVG图案，才有方法让他动起来。

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

关上Codepen，点击界面中的build按钮，就能够应用动画构建一个房子，并且让它升起寥寥炊烟！????


codepen

寻找精美的svg图案

既然本人画不进去，那咱们就去找现成的库，svg库有很多，如Flaticon、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的成果，更顺带附上代码：


codepen

简略几句代码就能达到如下成果：

上手GSAP

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。咱们在页面增加一个按钮来调用动画：

<!--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      }    )

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


codepen

补间是一个术语，用于形容逐帧序列，有时也称为"两头"。 在那个中央，一个动作导致下一个动作产生一个晦涩的动作。

欠缺动画

你能够把TimelineMax想像成时间轴，动画按指定程序执行，而staggerFrom则能够同时让多个DOM元素以渺小时间差的程序启动，另外咱们还能够设置一些Flag来指定要等到哪几个动画实现后，才接续其余动画。

最初，施展本人的创意，应用各种API打出一套组合拳 ????：


codepen

论断????

看到这里，蠢蠢欲动了吗？

总之，我本人感觉蛮乏味的，心愿或多或少对读到这篇文章的人有点帮忙。

最初给大家分享一个很酷的demo，来自我的文章封面

参考文章 ????

GreenSock Animation Platform

How to Create Beautiful SVG Animations Easily