SVG 动画开发基础知识学习

使用CSS来实现SVG动画

由于SVG也是由DOM节点组成的一种图形格式，就像HTML文档一样。并且它也可以使用css来操作、定义等，特别也支持使用CSS来实现动画效果，这对于广大的写惯了css3动画的前端开发者来说非常的亲切。

来通过一个简单的实例来体会下使用CSS来实现SVG动画效果。

html结构如下所示：

<div class="ball"></div>
<svg class="ball2" width="70px" height="70px" viewBox="0 0 70 70">
  <circle fill="black" cx="45" cy="45" r="25"/>
</svg>
<br>
<svg width="70px" height="70px" viewBox="0 0 70 70">
  <circle class="ball2" fill="black" cx="45" cy="45" r="25"/>
</svg>
<br>
<svg width="200px" height="70px" viewBox="0 0 200 70">
  <circle class="ball3" cx="45" cy="45" r="25"/>
</svg>

主要是通过CSS中的keyframes来实现动画效果，编写如下代码：

@keyframes animation-name-you-pick {
  0% {
   background: blue;
   transform: translateX(0);
 }
  50% {
   background: purple;
   transform: translateX(50px);
 }
  100% {
   background: red;
   transform: translateX(100px);
 }
}

写完keyframes后，就可以使用animation来声明动画效果：

.ball {
  animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}

效果：

动画效果主要托管在codepen上，demo地址。

可以看到第二个圆形在移动的时候，背景直接在运动的过程中消失了：

主要是以下原因造成的：

1、第二个圆，直接移动的是circle这个元素，而不是整个SVG。而SVG自己是有viewbox这个属性即用来定义SVG本身自己的可视区域大小。在第二个圆的动画中，是直接移动circle元素到X轴的200像素，SVG本身viewbox定义宽度只有70像素，circle元素移动的范围超过了viewbox定义的区域，所以才有了上面背景直接在运动的过程中消失了的效果。

关于viewbox可以去看看这篇文章。

明白了原因，只要修改下svg的viewbox定义的区域就可以修复这个问题：

<svg width="200px" height="70px" viewBox="0 0 200 70">
 <circle class="ball3" cx="45" cy="45" r="25"/>
</svg>

把viewbox的宽度和svg的宽度修改为200像素：

demo地址

SVG动画优势

看了上面的一个简单的实例，也许会感觉这用css和html来实现不更简单，为甚么要用SVG来实现的疑问？

当然一些简单的图形动画使用css和html来实现也许更简单，但是要实现下面的动画效果，如果使用html和css来实现，光是使用CSS写这个图形的布局就要使用很多的代码和时间，而且适配起来也非常麻烦。

如果使用SVG就非常方便，在矢量设计软件比如AI设计好就可以导出为SVG代码，只要专注写动画代码就可以。