SVG_10_动画专题之标签：animate

写在前面：

动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇文章开始，接下来还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。

动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

比如，有一个需求，是把一个球移动到另一端，移动方式可随意指定，用<animate>标签，可以很容易的做到。我们可以添加了一个<animate>元素到<circle>元素的内部。然后通过控制其中的attributeName、from、to、dur等属性来实现。

<animate> 比较重要的属性如下：

• attributeName 
  需要动画的属性名称

• from 
  属性的初始值

• to 
  属性的终止值

• values

values的两个值时，与from和to的写法效果一致。

<rect width="10" height="10" x="20" y="20">        <animate attributeName="x" values="10;30" dur="4s" repeatCount="indefinite"/>    </rect>    <rect width="10" height="10" x="20" y="40">        <animate attributeName="x" from="10" to="30" dur