svg 动画

lihengwangxinling 2011-10-20 08:35:08

以下是我写的代码，运行无错误，circle的圆心位置也改变，为什么不产生动画效果，高手指点下，谢谢~~~
<!DOCTYPE html>
<html>
<head>
<title>SVG Animation - Circle Translation</title>
<script>
var timer;
var delay = 16;
var balls =[];

function s2d(s)
{
return (s / 1000) * delay; // 速度：每秒同学屏幕的长度（单位;像素）；
}

function Vector(x_coordinate, y_coordinate)
{
this.xc = x_coordinate; // "xc" 表示x轴方向的同意矢量.
this.yc = y_coordinate; // "yc" 表示y轴方向的同意矢量.
}

//球的运动
SVGCircleElement.prototype.moveBall = function()
{
/*alert(this.getAttribute("cx"));
var ball_cx = this.getAttribute("cx");
ball_cx = parseInt(ball_cx)+parseInt(s2d(this.v.xc));

var ball_cy = this.getAttribute("cy");
ball_cy = parseInt(ball_cy)+parseInt(s2d(this.v.yc));

//球心的设置
this.setAttribute("cx", ball_cx);
this.setAttribute("cy", ball_cy);
alert(this.getAttribute("cx"));*/
alert( this.cx.baseVal.value + "===" + this.cy.baseVal.value);
this.cx.baseVal.value += s2d(this.v.xc);
this.cy.baseVal.value += s2d(this.v.yc);
alert( this.cx.baseVal.value + "===" + this.cy.baseVal.value);

}

function init()
{
var ballElement;
var svgElement = document.getElementById("svgElement");

var ele_g = svgElement.getElementById("g_id");
var eles_cir = ele_g.getElementsByTagName("circle"); //得到g元素下所有的circle元素；

for(var i=0;i<eles_cir.length;i++)
{
ballElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
ballElement.index = i;
ballElement.id = eles_cir.item(i).getAttribute("id");
ballElement.cx.baseVal.value = eles_cir.item(i).getAttribute("cx");
ballElement.cy.baseVal.value = eles_cir.item(i).getAttribute("cy");
ballElement.r.baseVal.value = eles_cir.item(i).getAttribute("r");
ballElement.v = new Vector(100, 80);
balls[i] = ballElement;
}

timer = setInterval(doAnim, delay);

}

/* - - - - - - - - - - - - - - - - - - - - - - - -碰撞检测 - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

function doAnim()
{
balls[0].moveBall();

}

</script>
</head>

<body onLoad="init();">
<div style="text-align: center; margin-top: 20px">

<svg id="svgElement" width="800" height="600" >
<rect id="rect_id" x="100" y="150" id="arena" width="600" height="300" rx="10" ry="10" style="fill:green; stroke: black; stroke-width:2;" />

<defs>
<linearGradient id="MyGradient">
<stop offset="20%" stop-color="#39F" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
</defs>

<g id="g_id">
<circle id="ball0" cx="200" cy="250" r="20" fill="url(#MyGradient)"/>
<circle id="ball1" cx="300" cy="300" r="40" fill="url(#MyGradient)"/>
<circle id="ball2" cx="300" cy="200" r="20" fill="white"/>
<circle id="ball3" cx="400" cy="400" r="20" fill="red"/>
</g>

</svg>

</div>
</body>
</html>

...全文