SVG 有很多好处,诸如良好的缩放支持,不用担心屏幕像素密度;较小的文件大小(当然这取决于绘制图像的路径复杂度);可以使用 CSS 控制 SVG(这点很重要,我们将在此篇文章中利用它)等等。

我们知道 SVG 应用于 icon 是一个典型的使用场景,而 CSS Animation 同样是一个令人愉悦的 Web 技术,当这两者结合时,oh,amazing~

SVG 也有内置的动画语法,如 animate,animateMotion 等,非本文讨论范畴(笔者对于此也不是很了解)

Animation SVG Moon

在线 DEMO

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
  <style>
    path {
      animation: bounce 2s infinite ease-in-out alternate;
      transform-origin: center;
    }
    @keyframes bounce {
      to {
        transform: scale(0) rotate(60deg);
      }
    }
  </style>
  <path fill="currentColor" d="M12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 C16.418278,20 20,16.418278 20,12 C20,11.6778801 19.9809872,11.3583398 19.9433432,11.0425086 C19.1009521,11.6569885 18.0775585,12 17,12 C14.2385763,12 12,9.76142375 12,7 C12,5.9224415 12.3430115,4.89904787 12.9574914,4.05665678 C12.6416602,4.01901279 12.3221199,4 12,4 Z M14.2633878,4.08262654 C13.4623038,4.83441054 13,5.8796173 13,7 C13,9.209139 14.790861,11 17,11 C18.1203827,11 19.1655895,10.5376962 19.9173735,9.7366122 C20.1909732,9.44507057 20.6791282,9.57665637 20.7691336,9.96621043 C20.9220747,10.628158 21,11.3091874 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 C12.6908126,3 13.371842,3.07792534 14.0337896,3.23086642 C14.4233436,3.32087176 14.5549294,3.80902683 14.2633878,4.08262654 Z"/>
</svg>

是的,style 可以写到 svg 标签内部,这样你可以像引用 svg icon 一样直接使用带有动画 icon。另外的一个好处是,你可以将 svg 用于 img 标签,像使用一个 GIF 一样。下面这个图片就是上面代码所示的 svg 👇

另外,你甚至可以像这样,提供一个富有交互的 icon(仅支持执行在代码中使用 svg)

Animation unDraw

undraw.co 是一个非常棒的开源插图库,种类丰富,如果你想用插图丰富一下你的网页、Slide 或其他的任何东西,不妨一试,总能找到称心的。

偶然间,在 Youtube 上看到 @Dev Ed 发布的一个 Learn to Build An SVG Animation With CSS 视频,想到站在巨人的肩膀上,使用 CSS 将插图动起来将是多么令人振奋。Let's do it~

emmm.... 动起来了,这里就不贴代码了(图片组成路径复杂导致代码略长),💡 相信你可以轻易找到查看代码的方式。

如果足够有创意和对 SVG 感兴趣,做一整套 Animation unDraw 也是不错的


更多阅读:

最后更新于:
2020-07-15