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="4s" repeatCount="indefinite"/>    </rect>

但values更多值时，可达到循环往复的效果，比如三个值，就能达到这总循环往复的效果。

通过控制rx属性，可以使方框变圆，再变回方框

<rect width="10" height="10">    <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />  </rect>

 

直接展示效果又被吞了，这里放视频

animate方框变圆再变方框

• dur 
  动画的时间

 

如果你想要让该元素的更多属性具有动画效果，只要添加更多的<animate> 元素到该元素内部即可。

 

根据attributeName的属性不同，from和to的值也要对应改变。

一般dur是动画的持续时间，我们使用indefinite来表示永动，就是永远执行。

原文：

Animating attributes of an element

The following example animates the cx attribute of a circle. To do so, we add an <animate> element inside the <circle> element. The important attributes for <animate> are:

• attributeName

• The name of the attribute to animate.

• from

• The initial value of the attribute.

• to

• The final value.

• dur

• The duration of the animation (for example, write '5s' for 5 seconds).

If you want to animate more attributes inside the same element, just add more <animate> elements.

 

先看效果

动画专题之标签animate

为防止效果被吞，我又进行了录屏

 

在这个效果中，我实现了多种方式，进行了简单的思维发散

 

• 填充色改变

原地不动的圆，fill的颜色由红色变为白色；

 

• 控件X轴距离改变

控制X轴的长短，使控件水平移动；

 

• 控件Y轴距离改变，同时改变描边的宽度

①，控制Y轴的长短，使控件垂直移动；

②，同时控制stroke-width描边的宽度；

 

• 控件X/Y轴距离同时改变，并同时改变原型控件的半径

①，同时控制控件X/Y轴的距离，使控件斜线移动；

②，同时缩小了半径；

 

结论与思考：

• 未达到的边框颜色并没有变色，我设置了改变stroke属性，但没有看到效果

• 另外，如果是text标签要添加动画呢？