乐趣区

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

前言

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

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

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

codepen

寻找精美的 svg 图案

既然本人画不进去,那咱们就去找现成的库,svg 库有很多,如 Flaticon、iconfont、Iconfinder 或 icons8 等网站会提供很多收费的 svg 图案。

剖析 svg 图案

关上 devtool 察看 svg 图案,你会看到上面的后果:

element外头 pathcircle都是 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 的 fromstaggerFrom,这两个 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

退出移动版