【孟子E章】

SVG中的动画技术(3)收藏

SVG中的动画技术(3)

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地址，比如：

下面看一个利用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" onload="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>