关于css:十分钟教你用svg做出精美的动画

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

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

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

codepen

既然本人画不进去，那咱们就去找现成的库，svg 库有很多，如 Flaticon、iconfont、Iconfinder 或 icons8 等网站会提供很多收费的 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 元素来操作！

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

所以咱们得借用工具，Timeline(Lite|Max)跟 TweenMax 是出名的 GreenSock Animation Platform（简称 GSAP）推出的可创立时间轴（timeline）作为动画或其余时间轴的容器，这使得整个动画管制和准确治理工夫变得简略。

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

codepen

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

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

关于css:十分钟教你用svg做出精美的动画

前言

寻找精美的 svg 图案

剖析 svg 图案

TimelineLite/TimelineMax 工具

上手 GSAP

欠缺动画

论断????

参考文章 ????