以下是我写的代码,运行无错误,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>
<!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>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货