动画技术是互联网中不可缺少的一个重要组成部分,是吸引访问者的重要手段之一,SVG也同样有能力随时改变矢量图象外在表现的能力。SVG中生成动画的方式有: |
1)利用SVG提供的动画元素实现:由于SVG的内容可以定义成动态变化的,因此,利用SVG提供的各种动画元素,我们就可以得到各种动画效果,比如:沿某路径运动、渐隐渐现、旋转、缩放、改变颜色等。 |
2)使用SVG DOM:由于SVG DOM遵循DOM1、DOM2规范的大部分内容,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,让通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图象的运动。 |
SVG的动画元素标准的指定者与SYMM(Synchronized Multimedia)工作组合作,共同编写了SMIL动画规范,这个规范描绘了XML文档结构中使用的通用的动画特征集。SVG不但实现了SMIL的动画规范,同时也提供了一些SVG的特殊扩展。SVG定义了比SMIL动画更为严格的错误处理程序,当文档中有任何错误产生时,动画都将会停止。 |
SVG支持SMIL(Synchronized Multimedia Integration Language)动画规范中定义的下面的动画元素: |
animate:改变SVG元素数值属性的不同值 |
set:是animate的简化,主要用来改变非数值属性的属性值,比如visibility属性等 |
animateMotion:沿某运动路线移动SVG元素 |
animateColor:改变某些元素的颜色属性值 |
SVG对SMIL动画的扩展元素和属性有: |
animateTransform:改变SVG转换的转换属性值 |
path属性:改变animateMotion元素中path属性的所有特性。 |
mpath元素:SVG允许animateMotion元素包含mpath子元素,它能够引用SVG中path元素的路径定义 |
rotate属性:SVG为animateMotion增加一个rotate属性,用来控制一个对象是否自动进行旋转。 |
下面通过一个简单的例子,来看一看SVG是如何实现动画效果的: |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" |
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
<svg width="500" height="400" |
xmlns="http://www.w3.org/2000/svg"> |
<desc>本例子说明SVG的动画元素</desc> |
<defs> |
<!-- 下面定义渐变效果 --> |
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpace"> |
<stop offset="0%" style="stop-color: #88f;"/> |
<stop offset="100%" style="stop-color: #008;"/> |
</linearGradient> |
</defs> |
<!-- 下面代码说明了如何使用animate元素来使圆产生动画效果,同时改变圆心的位置和半径的大小 --> |
<circle id="RectElement" cx="50" cy="50" r="50" |
fill="rgb(255,0,0)" style="fill: url(#grad1);"> |
<animate attributeName="cx" attributeType="XML" |
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="250" /> |
<animate attributeName="cy" attributeType="XML" |
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="150" to="152" /> |
<animate attributeName="r" attributeType="XML" |
xlink:href="#RectElement" begin="0s" dur="9s" fill="freeze" from="50" to="150" /> |
</circle> |
<!-- 建立一个新的坐标系统,并使文字旋转和放大 --> |
<g transform="translate(50,50)" > |
<!-- 下面的代码定义了“Hello,World!”这段文字,说明了'set','animateMotion', |
'animateColor'和'animateTransform'元素的用法。 --> |
<text id="TextElement" x="0" y="0" |
font-family="宋体-18030" font-size="18" visibility="hidden" > |
Hello,World! |
<set attributeName="visibility" attributeType="CSS" to="visible" |
begin="4s" dur="6s" fill="freeze" /> |
<animateMotion path="M 0 20 L 50 120" |
begin="4s" dur="6s" fill="freeze" /> |
<animateColor attributeName="fill" attributeType="CSS" |
from="rgb(0,0,255)" to="rgb(128,0,0)" |
begin="4s" dur="6s" fill="freeze" /> |
<animateTransform attributeName="transform" attributeType="XML" |
type="rotate" from="-90" to="0" |
begin="4s" dur="6s" fill="freeze" /> |
<animateTransform attributeName="transform" attributeType="XML" |
type="scale" from="1" to="3" additive="sum" |
begin="4s" dur="6s" fill="freeze" /> |
</text> |
<text x="145" y="285">http://lucky.myrice.com</text> |
</g> |
</svg> |
上面例子中,我们可以看到,一个带渐变颜色填充的圆,位置逐渐向右下方移动,圆心位置从(50,150)移动到(250,152),同时,半径也由50增大到150;文字“Hello,World!”在4秒时开始出现(可视性visibility由hidden变成了visible),并开始向圆中心方向移动,颜色从#0000FF逐渐变成了#800000,文字方向由-90度逐渐变成0度,文字大小逐渐变化到原来的3倍;文字的变化共持续了6秒。以上代码的效果如下图所示: |
|
下面解释代码中与动画元素和属性: |
animate:是动画元素,定义要进行变化的各种属性。 |
xlink:href:指定要进行动画的元素名称,是一个uri地址。要进行动画的元素必须是当前SVG文档中出现的元素,uri必须指定一个具有动画能力的元素,如果指定的元素不止一个,或者指定的元素没有进行动画的能力,则会产生错误;如果没有uri属性的话,要进行动画的元素就是当前动画元素的最接近的父元素。 |
attributeName:指定要进行动画变化的属性名称,可根据实际情况带上XML的名称空间。 |
attributeType:指定要变化的属性和属性值在什么名称空间里定义。可有三种选择之一:CSS、XML、auto。“CSS”指定attributeName的值是CSS属性的名字;“XML”指定attributeName的值是默认XML名称空间里定义的XML属性名;“auto”是默认值,首先搜索CSS属性列表看能否匹配attributeName,如果不能找到匹配的值,则寻找该元素的缺省XML名称空间 |
begin:指定元素何时进行动画。可以取的值有: offset-value、syncbase-value、event-value、repeat-value、accessKey-value、wallclock-sync-value、"indefinite" ,offset-value是相对于文档开始的时间,不能为负值;syncbase-value是相对于另外动画元素的同步时间,必须包含另外元素的id值;event-value是由事件触发;repeat-value是重复事件,元素动画开始时间是相对于重复事件触发的时间;accessKey-value是指相对于用户的键盘输入的时间;wallclock-sync-value是现实世界中的时间;indefinite是由beginElement()的调用或被链接到该元素决定是否开始动画。该属性如果同时选择多个值的话,要以分号“;”隔开。 |
dur:指定动画的持续时间。可以取下面三者之一:大于0的数值、media和indefinite。该属性值缺省为indefinite,即无限长。 |
end:指定动画结束的时间。与begin的取值方法类似。 |
fill:指动画后的填充状态。取下面二者之一:remove和freeze。remove表示不保留动画结束时的状态;freeze表示保留动画结束时的状态。缺省为remove。 |
from:指定动画开始时的属性值。 |
to:指定动画结束时的属性值。 |
additive:指定动画是否是在原来的基础上进行的。取sum和replace二者之一,默认为replace。 |
accumulate:指定动画是否是在前一次动画的基础上进行累加的。取sum和none二者之一,默认为none。 |
关于additive和accumulate两个属性的意义,我们可以通过改变下面例子中的不同值来领会。 |
<?xml version="1.0" standalone="no"?> |
<svg width="800" height="400"> |
<defs> |
<linearGradient id="grad1" x1="0" y1="0" |
x2="100%" y2="100%" gradientUnits="userSpace"> |
<stop offset="0%" style="stop-color: #88f;"/> |
<stop offset="100%" style="stop-color: #008;"/> |
</linearGradient> |
</defs> |
<rect width="100px" height="200px" style="fill:url(#grad1)"> |
<animate attributeName="width" from="0px" to="100px" |
fill="freeze" dur="10s" attributeType="XML" |
additive="sum" |
accumulate="none" repeatCount="5"/> |
</rect> |
</svg> |
另外,还有min(动画持续的最小时间)、max(动画持续的最大时间)、restart(动画重新开始的时间,取always、whenNotActive和never之一)、repeatCount(动画重复的时间)和repeatDur(所有重复的持续时间)。时间的格式可以是02:10:13、20:10:10.25、10.5s、00:00.005、12.467、5ms、3.2h等,但里面不能包含空格,头尾有空格时将被忽略。 |
下面再看一个沿指定路径运动的例子: |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" |
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
<svg width="500" height="300" viewBox="0 0 500 300" |
xmlns="http://www.w3.org/2000/svg"> |
<desc>沿路径运动的例子</desc> |
<defs> |
<!-- 下面定义渐变颜色 --> |
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="100%" gradientUnits="userSpace"> |
<stop offset="0%" style="stop-color: #88f;"/> |
<stop offset="100%" style="stop-color: #008;"/> |
</linearGradient> |
</defs> |
<rect x="1" y="1" width="498" height="298" |
fill="none" stroke="blue" stroke-width="2" /> |
<!-- 下面的代码画出一个路径 --> |
<path d="M100,250 C 100,50 400,50 400,250" |
fill="none" stroke="blue" stroke-width="8" /> |
<!-- 下面的这个圆将沿着定义的轨迹运动 --> |
<circle r="25" style="fill:url(#grad1)"> |
<!-- 定义动画的运动轨迹 --> |
<animateMotion dur="6s" repeatCount="indefinite" |
path="M100,250 C 100,50 400,50 400,250" rotate="auto" /> |
</circle> |
<text x="145" y="285" style="font-size:12pt">http://lucky.myrice.com</text> |
</svg> |
上面的例子应用了animateMotion动画元素,其属性设定和前面类似。该例子的效果如图所示: |
|
SVG DOM产生动画的方式是由脚本语言调用DOM对象的属性和方法实现的,在SVG中使用脚本语言和HTML中类似,首先是指定脚本的语言类型:有两种办法可以指定脚本的语言类型 |
1),在SVG元素里使用contentScriptType属性,可以指定整个文档里使用的缺省脚本语言类型。 |
语法如下: |
<svg contentScripttype="content-type"> |
content-type指定一种媒体类型,默认是"text/ecmascript" |
2),在script元素里使用type属性来声明该段脚本所使用的语言类型。 |
语法如下: |
<script type="content-type"> |
content-type就是所使用的媒体类型。 |
SVG里的script元素和HTML里的完全一致。任何script元素里定义的函数都可以应用到整个文档里,也可以通过xlink:href属性,指定一个脚本文件的URL地址,比如:<script type="text/JavaScript" xlink:href="test.js"></script>。 |
下面看一个利用SVG DOM产生动画的例子,: |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" |
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> |
<svg height="4in" width="4in" viewBox="0 0 1000 1000" οnlοad="main(evt);"> |
<script type="text/ecmascript"><![CDATA[ |
var root; // 定义根 |
var svg; // 定义SVG元素 |
var canvas; // 空的画布 |
var array = new Array; |
var speed = 80; // 速度 |
function main( evt ) { |
svg = evt.getTarget(); |
root = svg.getOwnerDocument(); |
canvas = root.getElementById( 'canvas' ); |
for (i = 50; i < 900; i += 50 ) { |
var obj = new_rectangle( 0, i ); |
array.push( obj ); |
canvas.appendChild( obj ); |
} |
setInterval( frame, speed ); |
} |
function new_rectangle( x, y ) { |
var rectangle = root.createElement( 'rect' ); |
rectangle.setAttribute( 'x', x ); |
rectangle.setAttribute( 'dx', 0 ); |
rectangle.setAttribute( 'y', y ); |
rectangle.setAttribute( 'width', '50' ); |
rectangle.setAttribute( 'height', '50' ); |
rectangle.setAttribute( 'style', |
'stroke: #050; stroke-width: 5; fill: #2f2;' ); |
return rectangle; |
} |
function frame() { |
for (i=0; i<array.length; i++) { |
var obj = array[i]; |
var x0 = new Number( obj.getAttribute( 'x' ) ); |
var dx0 = new Number( obj.getAttribute( 'dx' ) ); |
var dx = 1 + 3 * Math.round(Math.random() * dx0); |
var x1 = x0 + dx; |
obj.setAttribute( 'x', x1 ); |
obj.setAttribute( 'dx', dx ); |
obj.getStyle().setProperty( 'opacity', (1000 - x0) / 1000 ); |
if ( x1 >= 1000 ) { |
obj.setAttribute( 'x', 0 ); |
obj.setAttribute( 'dx', 0 ); |
obj.getStyle().setProperty( 'opacity', 1 ); |
} |
} |
} |
]]></script> |
<defs> |
<linearGradient id="grad1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpace"> |
<stop offset="0%" style="stop-color: #88f;"/> |
<stop offset="100%" style="stop-color: #008;"/> |
</linearGradient> |
</defs> |
<rect id="background" x="0%" y="0%" width="100%" height="100%" style="fill: url(#grad1)"/> |
<g id="canvas"></g> |
<text x="145" y="985" style="font-size:36pt;" fill="#FFFFFF">http://lucky.myrice.com</text> |
</svg> |
上面的例子中,首先找到要进行动画的元素的容器元素,即g;然后每隔50px高产生一个50*50的正方形,并把他们添加到g的节点中,最后每隔80毫秒,动态改变其位置和透明度,就可以看到动态的效果了!上面例子的效果如下图所示: |
|
注意:在测试以上的例子时,要保存成UTF-8的文件格式,否则,可能看不到效果! |
(网页编辑:风之翼) |