写在前面:
动画是最直观的表达方式,比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻,最过目不忘的友好表达方式,从本篇文章开始,接下来还有两篇讲述动画,共计三篇动画文档,满足动画你对动画渴求。
动画元素放在形状元素的内部,用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里,属性从开始值变成结束值。
比如,有一个需求,是把一个球移动到另一端,移动方式可随意指定,用<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标签要添加动画呢?