SMIL Animation overview
和
SMIL Animation animation model
。但是对于下列的不在SMIL动画规范中的动画特征可以参考：
SVG extensions to SMIL Animation
。
|
动画元素名称
|
描述
|
|
“animate”
|
可以实时的改变标准的属性和属性值的取值
|
|
“set”
|
一个”animate”的简化集合，被用来修改非数值类型的属性值产生动画，例如”visibility”属性
|
|
“animateMotion”
|
沿着一个动画路径来移动元素
|
|
“animateColor”
|
实时的修改特定的颜色值产生动画
|
|
名称
|
描述
|
|
“animateTransform”
|
实时的修改一个SVG的transformation属性，例如”transform”属性
|
|
“path”
|
SVG允许用SVG的路径属性来为一个”animateMotion”元素指定一个”path”属性
|
|
“mpath”
|
SVG允许一个”animateMotion”元素含有子属性”mpath”来引用一个SVG的”path”元素作为指定的动画路径
|
|
“keyPoints”
|
SVG在”animateMotion”上面添加了一个”keypoints”属性精确地控制路径动画的速率。
|
|
“rotate”
|
SVG在”animateMotion”上添加了一个”rotate”属性控制一个图形在沿路径运动的时候是否沿X轴方向偏转一个角度
|
SMIL动画要求客户端语言定义文档开始和文档结束。由于一个”svg”有时可以作为一个XML文档树的根节点，有时可以作为一个XML父节点语法的组件，文档开始是一个给定的SVG文档被定义并在SVG元素的
SVGLoad event
触发时下载。一个SVG文档片段的文档结束是在在这一点上文档片段被释放并不在被用户代理处理。然而，在一个SVG文档当中嵌套的SVG元素在这种情形下不会产生文档片段，并且不会定义一个独立的文档开始；嵌套的文档片段一直与为根”svg”元素定义的文档时间相关联。
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example anim01 - demonstrate animation elements</desc>
<rect x="1" y="1" width="798" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- The following illustrates the use of the 'animate' element
to animate a rectangles x, y, and width attributes so that
the rectangle grows to ultimately fill the viewport. -->
<rect id="RectElement" x="300" y="100" width="300" height="100"
fill="rgb(255,255,0)" >
<animate attributeName="x" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="0" />
<animate attributeName="y" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="0" />
<animate attributeName="width" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="300" to="800" />
<animate attributeName="height" attributeType="XML"
begin="0s" dur="9s" fill="freeze" from="100" to="300" />
</rect>
<!-- Set up a new user coordinate system so that
the text string's origin is at (0,0), allowing
rotation and scale relative to the new origin -->
<g transform="translate(100,100)" >
<!-- The following illustrates the use of the 'set', 'animateMotion',
'animate' and 'animateTransform' elements. The 'text' element
below starts off hidden (i.e., invisible). At 3 seconds, it:
* becomes visible
* continuously moves diagonally across the viewport
* changes color from blue to dark red
* rotates from -30 to zero degrees
* scales by a factor of three. -->
<text id="TextElement" x="0" y="0"
font-family="Verdana" font-size="35.27" visibility="hidden" >
It's alive!
<set attributeName="visibility" attributeType="CSS" to="visible"
begin="3s" dur="6s" fill="freeze" />
<animateMotion data-path="M 0 0 L 100 100"
begin="3s" dur="6s" fill="freeze" />
<animate attributeName="fill" attributeType="CSS"
from="rgb(0,0,255)" to="rgb(128,0,0)"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="-30" to="0"
begin="3s" dur="6s" fill="freeze" />
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="3" additive="sum"
begin="3s" dur="6s" fill="freeze" />
</text>
</g>
</svg>
IRI reference
，可以表示动画的目标并实时的修改。目标元素必须是当前文档片段的一部分。<iri> 必须准确的指定一个目标元素，这个目标元素可以可以成为给定动画的目标元素。如果<iri>指向多个目标元素，如果 给定的目标元素不可以附加指定的动画，如果给定的目标元素不是当前SVG文档片段的一部分，那么文档会发生错误。如果”xlink:href”属性没有被提供，那么目标元素将是当前动画元素的父元素。
SMIL Animation: Specifying the animation target
SMIL Animation: Specifying the animation target
SMIL Animation: Specifying the animation target
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Demonstration of the resolution of namespaces for animation</title>
<!-- at the point of definition, the QName a:href resolves to the namespace
name "http://www.w3.org/1999/xlink" and the local name "href" -->
<g xmlns:a="http://www.w3.org/1999/xlink">
<animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
</g>
<!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
happens to be bound to the namespace prefix 'b' while the prefix
'xlink' is bound to a different namespace name -->
<g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">
<image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>
</g>
</svg>
a
和 V
b代表了两个值，它们之间的距离被计算。由于步调动画打算产生一个同步于变化的动画，那么为所有数据类型定义距离函数是没有意义的。距离可以为那些值为n维向量的类型被有效地定义。例如：一个<length>值是一个标量值，一个<color>值是一个三维向量。因此这些类型的属性可以让步调动画应用到它们上面。另一方面，一个<list-of-length>是一个标量的序列，并且<list-of-points>是一个二维向量的序列。因而这些类型不会有一个距离函数的定义并且不能有步调动画应用到它们上面。被步调动画所支持类型的距离函数如下所示：
<coordinate>,<integer>,<length>,<number>
a
, V
b
) = |V
a
− V
b
|
a
, V
b
) = sqrt((V
a
.red − V
b
.red)
2
+ (V
a
.green − V
b
.green)
2
+ (V
a
.blue − V
b
.blue)
2
), where:
i
.red is the red component of the V
i
color value,
i
.green is the green component of the V
i
color value, and
i
.blue is the blue component of the V
i
color value.
a
, V
b
) = sqrt((V
a
.tx − V
b
.tx)
2
+ (V
a
.ty − V
b
.ty)
2
), where:
i
.tx is the
x
component of the V
i
translation transform value, and
i
.ty is the
y
component of the V
i
translation transform value.
a
, V
b
) = sqrt((V
a
.sx − V
b
.sx)
2
+ (V
a
.sy − V
b
.sy)
2
), where:
i
.sx is the
x
component of the V
i
scale transform value, and
i
.sy is the
y
component of the V
i
scale transform value.
a
, V
b
) = sqrt((V
a
.angle − V
b
.angle)
2
), where:
i
.angle is the angle component of the V
i
rotation or skew transform value.
“Evaluation of begin and end time lists”
offset-value
|
syncbase-value
|
event-value
|
repeat-value
|
accessKey-value
|
wallclock-sync-value
|
“indefinite”
)
offset-value
|
syncbase-value
|
event-value
|
repeat-value
|
accessKey-value
|
wallclock-sync-value
| “indefinite” )
SMIL Animation: ‘end’ attribute
min
=
Clock-value
| “media”
指明活动周期的最小值。属性值是下面两者之一：
Clock-value
指明活动周期最小值的长度，以本地时间为基准。值必须大于0.
“media”
指明活动周期的最小值作为媒体固有周期。它仅对媒体定义的元素有效。（对SVG动画来说，如果被指定为媒体，这个属性将会被忽略。）
“min”的默认值是”0″。这不会对活动周期产生一点约束。除了在本规范中定义的SVG特殊属性，本属性的标准定义在
SMIL Animation
规范中。特别的，请参考：
SMIL Animation: ‘min’ attribute
max
=
Clock-value
| “media”
restart
=
“always” | “whenNotActive” | “never”
always
动画可以在任意时刻重新启动，它是默认值。
whenNotActive
动画只有在没有其他动画正在运行时才可以重启。尝试在动画运行的时候重启动画将会被忽略。
never
元素不会为剩余的当前动画周期的父时间容器重启动画。（在SVG的情况下，因为父时间容器是SVG文档片段，那么动画不会为了剩余的文档周期重启）
除了本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
规范中。特别的，请参考：
SMIL Animation: ‘restart’ attribute
repeatCount
=
numeric value | “indefinite”
指明了动画函数的迭代次数，它的取值范围如下：
numeric value
这是一个十进制的”floating point”数值，制定了迭代数值。它引入了部分迭代，可以解释为浮点数的小数部分。一个小数值可以解析成为一个周期的一部分。值必须大于0.
“indefinite”
动画被定义为无限的重复
除了本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
规范中。特别的，请参考：
SMIL Animation: ‘repeatCount’ attribute
repeatDur
=
Clock-value
| “indefinite”
fill
=
“freeze” | “remove”
SMIL Animation: Restarting animation
）
Clock-val ::= Full-clock-val | Partial-clock-val
| Timecount-val
Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val ::= Timecount ("." Fraction)? (Metric)?
Metric ::= "h" | "min" | "s" | "ms"
Hours ::= DIGIT+; any positive number
Minutes ::= 2DIGIT; range from 00 to 59
Seconds ::= 2DIGIT; range from 00 to 59
Fraction ::= DIGIT+
Timecount ::= DIGIT+
2DIGIT ::= DIGIT DIGIT
DIGIT ::= [0-9]
02:30:03
= 2 hours, 30 minutes and 3 seconds
50:00:10.25
= 50 hours, 10 seconds and 250 milliseconds
02:33
= 2 minutes and 33 seconds
00:10.5
= 10.5 seconds = 10 seconds and 500 milliseconds
3.2h
= 3.2 hours = 3 hours and 12 minutes
45min
= 45 minutes
30s
= 30 seconds
5ms
= 5 milliseconds
12.467
= 12 seconds and 467 milliseconds
00.5s = 500 milliseconds
00:00.005 = 5 milliseconds
‘animate’
,
‘animateColor’
,
‘animateMotion’
和
‘animateTransform’
。这些属性定义的值被实时的分配到指定目标元素的属性上。这些属性在下面提供了控制相关事件的关键帧和离散值之间的插入方法。属性定义：
calcMode
=
“discrete | linear | paced | spline”
指定了动画的写入模式。它可以取下面的值。默认的模式是”linear”，然而如果属性不支持linear模式写入，
‘calcMode’
属性被忽略并且离散方式写入会启用。
discrete
这表示动画函数将会从一个值在没有任何写入的情况下跳到下一个值。
linear
值之间简单的线性写入被用作计算动画函数。除了
‘animateMotion’
，它是
‘calcMode’
的默认值。
paced
定义了贯穿整个动画变化产生平稳步调的写入方式 。这个方式仅被有适当的距离函数定义的数据类型支持， 它仅包含标量数据类型和在
Paced animation and complex types
中
列出的类型。如果”paced”被指定，所有的
‘keyTimes’
和
‘keySplines’
将会被忽略。对
‘animateMotion’
来说，它是默认的
‘calcMode’
。用户被禁止在没有定义一个
距离函数的类型上使用步调动画，主要是因为在一些客户端上的不可预知的后果。
spline
定义了从
‘values’
列表中的一个值通过一个用立体贝赛尔函数定义的时间函数到达下一个值。spline的点定义在
‘keyTimes’
属性中，每个区间的控制点定义在
‘keySplines’
属性中。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
中。特别的，请参考：
SMIL Animation: ‘calcMode’ attribute
values
=
“<list>”
一个用分号分隔的控制动画步调的时间值列表。每次在列表中的值符合在
‘values’
属性列表中值，并且定义了什么时间这个值被使用到动画函数中。每次在
‘keyTimes’
中的值用一
个0-1之间的浮点数来指定，它会重绘一个均衡的补偿到动画元素的周期当中。对于一个被指定带有
‘values’
列表的动画，
‘keyTimes’
如果被指定，那么必须像在
‘values’
列表中
的值一样多。对from/to/by动画，
‘keyTimes’
如果被指定，就必须有两个值。每个连续的时间值必须比它前面的值大或者相等。
‘keyTimes’
列表的语义取决于写入的模式。
对linear和spline动画，在列表中的第一个时间值必须是0，最后一个时间值必须是1.每一个关联到每一个值的key time在这个值被设置的时候定义。值被写入到key times之间。
对于离散动画，在列表中的第一个时间值必须是0，
最后一个时间值必须是1.每一个关联到每一个值的key time在这个值被设置的时候定义。动画函数会使用这个值直到下一个时间值。
如果写入模式是”paced”，那么本属性将会被忽略。如果在
‘keyTimes’
中有任一错误，文档片段会发生错误。如果周期是无限的，所有的
‘keyTimes’
都会无效。
由于对一些值的类型步调动画模式不会指定，对这些类型使用者被推荐使用带有计算过的
‘keyTimes’
“linear”动画模式来取得特殊的写入效果。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
中。特别的，请参考：
SMIL Animation: ‘keyTimes’ attribute
keySplines
=
“<list>”
一系列与”keyTimes”列表关联的贝塞尔控制点，定义了一个控制区间步调的立体贝塞尔曲线函数。属性值是一个分号分割的控制点列表描述。每一个控制点描述一组四个值：
x1 y1 x2 y2
,
描述了对一个时间片段的贝塞尔控制点。注意：SMIL允许值通过空白符或者逗号空白符分隔。”keyTimes”值定义了与与关联片段的贝塞尔”anchor points”,并且”keySplines”值是控制点。
因此”keySplines”的控制点必须比”keyTimes”的控制点最少多一个。值的取值范围是[0,1]。这个值除非
‘calcMode’
设置为
‘spline’，否则这个属性将会被忽略。如果在
‘keySplines’
中出现任一错误，文档会发生错误。
from
=
“<value>”
指定了动画的起始值。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
中。特别的，请参考：
SMIL Animation: ‘from’ attribute
to
=
“<value>”
指定了动画的结束值。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
中。特别的，请参考：
SMIL Animation: ‘to’ attribute
by
=
“<value>”
指定了动画的相对偏移量。
除了在本规范中明确提到的SVG特殊规范，本属性的标准定义在
SMIL Animation
中。特别的，请参考：
SMIL Animation: ‘by’ attribute
‘keySplines’
属性的写入。每一幅图图解了
‘keySplines’
设置对单个区间的影响。横向的坐标轴可以认为是在区间中单元过程写入的输入值，动画的步调将会沿着给定的区间使用这些写入值。纵向坐标轴是单元程序的结果值，取决于
‘keySplines’
属性定义的函数。另一种解释是横向坐标轴是对区间的输入单元事件，并且纵向坐标是输出单元事件。同样可参考章节：
‘keySplines’
值，动画程序写入的近似值如下：
|
Value of ‘keySplines’ |
Initial value | After 1s | After 2s | After 3s | Final value |
|---|---|---|---|---|---|
| 0 0 1 1 | 10.0 | 12.5 | 15.0 | 17.5 | 20.0 |
| .5 0 .5 1 | 10.0 | 11.0 | 15.0 | 19.0 | 20.0 |
| 0 .75 .25 1 | 10.0 | 18.0 | 19.3 | 19.8 | 20.0 |
| 1 0 .25 .25 | 10.0 | 10.1 | 10.6 | 16.9 | 20.0 |
additive
=
“replace | sum”
控制的动画是否可以追加到前面的动画上。促成多个动画的联合运行。
sum
指明了动画将追加到属性的根本值和前面的低权限动画上。
replace
指明了动画将覆盖属性的根本值和前面的低权限动画 。这是默认值，但是表达效果也受动画值属性”by”和”to”影响，就如在
accumulate
=
“none | sum”
控制了动画结果是否可以累计
‘animate’
元素被用作实时动画单一的属性。例如，让一个矩形在5秒内淡出，你可以指示：
-
Categories:
-
Animation element
- Any number of the following elements, in any order:
Content model:
Attributes:
DOM Interfaces:
‘set’
元素表达了一个简单的含义是对一个指定的周期仅仅设置一个属性的值。它支持所有的属性类型，包括那些不能合理写入的字符串和布尔值等等。
‘set’
元素是不可以追加动画的。追加和累计对
‘set’
元素是不允许的，即便是设置了也会被忽略。
-
Categories:
-
Animation element
- Any number of the following elements, in any order:
Content model:
Attributes:
DOM Interfaces:
to
= ”
<value>
”
‘set’
元素的周期中指定了属性的值。参数值必须匹配属性类型。对于可以使用
‘set’
元素动画的一个属性列表，可以查看：
Elements attributes and properties that can be animated
‘animateMotion’
元素会使被引用元素沿着一个动作路径运动。
-
Categories:
-
Animation element
-
Any number of
descriptive elements
and at most one
‘mpath’
element, in any order.
Content model:
Attributes:
DOM Interfaces:
calcMode
=
“discrete | linear | paced | spline”
指明了动画的写入方式。引用了前面的
‘calcMode’
属性的描述。唯一的不同点是默认值是”paced”。参考：
SMIL Animation: ‘calcMode’ attribute for ‘animateMotion’
path
= ”
<path-data>
”
keyPoints
= ”
<list-of-numbers>
”
distance along the path
算法。每一个在列表中的值必在
‘keyTimes’
列表中有相对应的值。如果一个”keyPoints”属性的值被指定，那么必须有一个
‘keyTimes’
列表与之
对应。如果这个属性有错误，那么文档会出错。
rotate
= ”
<number>
| auto | auto-reverse
”
auto
origin
= ”
default
”
-
Categories:
- None
- Any number of the following elements, in any order:
Content model:
Attributes:
DOM Interfaces:
‘animateMotion’
，对
‘from’
,
‘by’
,
‘to’
和
‘values’
指定的值，含有多个x，y坐标值对，x坐标与y坐标用空白符或者单个逗号分隔。例如：from=”33,15″
‘values’
属性必须含有一个x,y坐标值对列表。坐标值最少用一个空白字符或者一个逗号进行分隔。在
分隔符两侧额外的空白符是可以允许的。例如：
values=”10,20;30,20;30,40″
或者
values=”10mm,20mm;30mm,20mm;30mm,40mm”。每一个坐标都表示一个长度。
‘calcMode’
设置，并且如果没有提供
‘keyPoints’
没有提供值，值的数量被定义为path定义的点数量，除非path之中有多个”move to”指令。在路径当中一个”move to”指令当作为一个分隔点划分周期或者与
‘keyTimes’
,
‘keySplines’
和
‘keyPoints’
值相关，这个”move to”指令是不被计数的。当一个路径与一个
“paced”
‘calcMode’
设置结合时，所有的”move to”指令
‘animateMotion’
的重写规则如下。考虑动作路径的定义，
‘mpath
元素重写了
‘path’
属性，重写了
‘values’
，重写了
‘from’
,
‘by’
和
‘to’
。考虑复合到
‘keyTimes’
属性的点，
‘keyPoints’
属性重写了
‘path’
，重写了
重写了
‘from’
,
‘by’
和
‘to’
。在一个动作路径动画的期间dur内的任意时刻t，沿着动作路径计算
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="3cm" viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<desc>Example animMotion01 - demonstrate motion animation computations</desc>
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along
with three small circles at the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250"
fill="none" stroke="blue" stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
|
|
After 0s |
After 3s |
After 6s |
|
Supplemental transform due to movement along motion path
|
translate(100,250)
|
translate(250,100)
|
translate(400,250)
|
|
Supplemental transform due to
rotate=”auto” |
rotate(-90)
|
rotate(0)
|
rotate(90)
|
‘animate’
来替代它
‘animateTransform’
元素向目标元素上动画了一个移动属性，由此允许动态的控制平移，缩放，旋转，斜交。
-
Categories:
-
Animation element
- Any number of the following elements, in any order:
Content model:
Attributes:
DOM Interfaces:
type
= ”
translate | scale | rotate | skewX | skewY
”
type=”translate”的，每一个属性赋值的可以用<tx>或者<tx>,<ty>
type=”skewX”
和
type=”skewY”的，每一个属性值赋值可以用
<skew-angle>
指明活动周期最大值的长度，以本地时间为基准。值必须大于0.
“media”