中文XML论坛--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"?>

<defs>

<linearGradient id="grad1" x1="0" y1="0"

x2="100%" y2="100%" gradientUnits="userSpace">

</linearGradient>

</defs>

<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">

xmlns="http://www.w3.org/2000/svg">

<desc>沿路径运动的例子</desc>

<defs>

</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" />

<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属性，可以指定整个文档里使用的缺省脚本语言类型。

语法如下：

content-type指定一种媒体类型，默认是"text/ecmascript"

2），在script元素里使用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">

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>

</defs>

<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的文件格式，否则，可能看不到效果！


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	92.773ms