svg 动画_svg 动画介绍（一）

今天讲svg的动画属性 animate、animateTransform、animateMotion(第一节)

SVG 动画元素

animate、animateTransform、animateMotion

animate

基础动画元素。实现单属性的动画过渡效果。

属性	描述
attributeName	要变化的元素属性名称。
from	动画的起始值。
to	指定动画的结束值。
dur	常规时间值或indefinite无限。
repeatCount	表示动画执行次数或indefinite无限。

注：同一个图形元素可以设置单个或多个动画元素

r="20" cx="50" cy="100">

attributeName="cx" from="50" to="220"

dur="3s" repeatCount="indefinite">

attributeName="fill" from="black" to="red"

dur="3s" repeatCount="indefinite">

attributeName="r" from="20" to="50"

dur="3s" repeatCount="indefinite">

从代码上可以看到在circle图形设置了三个动画属性

1、圆心坐标cx从50到220

2、圆的填充颜色从黑到红过渡

3、圆的半径从20到50

统一设置过渡时间为3s，执行次数为无限次。

svg animate动画效果是叠加的，不是replace。

animateTransform

实现transform变换动画效果的。

在这之前我们简单看一下transform的属性参数

属性	描述
translate(x-value, y-value)	偏移。沿x轴方向偏移x-value个单位长度，沿y轴方向偏移y-value个单位长度。
scale(x-value, y-value)	缩放。x轴方向上的长度变为原来的x-value倍，y轴方向上的长度变为原来的y-value倍。
rotate(angle,[centerX, centerY])	默认以坐标系中(0,0)原点为圆心，顺时针旋转angle度。
skewX(angle) skewY(angle)	skewX和shewY可以使x轴和Y轴歪斜。

注：css中提供了一套与svg形变一致的transform属性

之后的课会讲如何用css3来实现svg动画

这是animateTransform属性参数

属性	描述
attributeName	要变化的元素属性名称。
attributeType	支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。
type	选择transform属性。
from	动画的起始值。
to	指定动画的结束值。
values	用分号分隔的一个或多个值，可以看出是动画的多个关键值点。
dur	常规时间值或indefinite无限。
repeatCount	表示动画执行次数或indefinite无限。

r="20" cx="50" cy="30">

attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="translate" values="0,0; 0,20; 200,20" repeatCount="indefinite"/>

r="20" cx="50" cy="80">

attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="scale" from="1" to="1.5" repeatCount="indefinite"/>

x="120" y="150" width="100" height="50">

attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 170 175" to="-180 170 175" repeatCount="indefinite"/>

x="60" y="260" width="100" height="50">

attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="skewX" from="0" to="20" repeatCount="indefinite"/>

代码依次

1、圆先Y轴向下移到20再X轴向右移到200。

2、圆放大1.5倍。

3、以矩形为中心，旋转矩形。

3、矩形X轴的扭曲20。

下面我们看一个实例，来更好的了解一下。

上面的实例，用到svg的分组元素g和引用元素use

g元素(“group”的简写)，用于给逻辑上相联系的图形元素分组。

use元素用于引用文档中其它位置定义的元素。你可以重用已有的元素。

transform="translate(0, 100)" id="car">

d="...">

xlink:href="#car" transform="translate(450,0)"/>

svg 动画部分还有很多更有意思的属性和事件，我们在之后的课程里陆续介绍给大家。