SVG动画入门

今天我们继续来学习SVG动画方面的知识。一听到动画效果，你可能就觉的头都打啦。不要担心，SVG本身提供的动画属性非常容易使用，今天我们就来学习一下基础的知识。

SVG动画入门

基础知识

SVG中提供了 animate的方法来制作动画属性：

<svg>  
<rect width="200" height="200" fill="slategrey">  
<animate attributeName="height" from="0" to="200" dur="3s"/>  
</rect>  
</svg>

在上面的代码中，我们在元素里面添加了一个 <animate>的标签。 <animate>包含了下面的一些属性。

• attributeName 这个是用来指定元素要运动的属性
• from 这个是用来设置元素属性运动的初始值
• to 这个是用来指定运动的终止的值的
• dur 这个是用来指定动画执行的时长。它的语法格式可以去这个地址看看 Clock Value Syntax。比如 02：33就表示2分钟33秒，如下：

SVG动画入门

比如我们要给一个圆形( <circle>)制作一个动画效果，可以这样来写：

<svg>  
<circle r="100" cx="100" cy="100" fill="slategrey">  
<animate attributeName="r" from="0" to="100" dur="3s"/>  
</circle>  
</svg>

具体执行效果可以去这个地址看一看 demo

移动一个元素

移动一个SVG元素，我们只要指定元素移动目标的坐标就可以了分别为 x和 y。

<svg>  
<rect x="0" y="0" width="200" height="200" fill="slategrey">  
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>  
</rect>  
</svg>

在上面的代码中，我们指定把矩形元素从0移到200的位置，动画时长为3秒，这个矩形将会从左至右水平方向，移动到200的位置。这里注意一点的是在用 animate方法的时候，有一个 fill属性的值为 freeze，fill="freeze" 特性；该特性可用于所有animate元素，它指示SVG查看器在动画完成时让元素“冻结”在其最终位置上。

SVG动画入门

我们也可以使用它来制作一个圆形的动画效果，定义 cx和 cy的属性值就可以了：

<svg>  
<circle r="100" cx="100" cy="100" fill="slategrey">  
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>  
</circle>  
</svg>

具体执行结果，可以去这个地址看看 demo。

给多个属性执行动画

上面我们只是针对一个属性来制作动画效果，我们当然也可以对多个属性来设置动画属性，我们来看一个例子：

<svg>  
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">  
<animate attributeName="r" from="0" to="100" dur="3s"/>  
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>  
</circle>  
</svg>

这里跟上面的差不多，只不过是多了一个 animate标签，来操纵多个属性 radius和 stroke with。

SVG动画入门

跟随路径运动

在上一篇文章 在SVG中定义文字文章中，我们说到了可以让文字跟随路径的方向来排版文字。当然让元素跟随路径的方向来运动也可以做到，下面我们来看一个例子。

<svg>  

<defs>  
<path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095  
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>  
</defs>  

<circle r="15" cx="15" cy="15" fill="slategrey">  

</svg>

我们把路径定义在 <defs>标签里，上面代码就是这样干的。为了能使元素跟随路径来运动，我们需要用 <animateMotion>来引入路径 <mpath>，如下所示：

<animateMotion dur="3s">  
<mpath xlink:href="#thepath"/>  
</animateMotion>  

SVG动画入门

代码执行效果可以去这个地址看看 demo。

Transformations

我们也可以使用transformation中的 scale， translate和 rotate来制作动画效果，这个要用到 <animateTransform>：

<svg>  
<rect width="200" height="200" fill="slategrey">  
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>  
</rect>  
</svg>

transformation的使用方法跟CSS3中的transformation的使用方法相似，可以去这篇文章详细了解一下transformation的用法 CSS3 2d transformation。

SVG动画入门

代码执行效果可以去这个地址看看 demo。

如果你很擅长用SVG来制作动画效果，可以尝试去模仿下这两个动画效果来创建两个动画效果 效果一和 效果二。

用SVG创建动画效果比用Flash创建动画效果要好的一个优势是，不需要依赖第三方插件以及运行的性能也要比Flash要好。而且现在Adobe公司也停止了flash对安卓设备的支持，现在是时候在你的项目中，用SVG来创建动画效果了。

推荐阅读：

• 20 SVG Uses That Will Make Your Jaw Drop
• SVG Animate Documentation
• Advanced SVG Animation Techniques

Demo， 源代码下载。

原文： http://janily.gitcafe.io/life/2013/12/06/svg-animation/

本文： SVG动画入门

下载： source