โดย สมโภชน์ กุลธารารมณ์
<head> <title>SVG Animation – Circle Translation</title>
<script> var timer; var delay = 16;
function s2d(s)
{ return (s / 1000) * delay; }
function init()
{ svgElement = document.getElementById(“svgElement”);
circle0 = document.getElementById(“circle0″);
timer = setInterval(doAnim, delay);
circle0.vx = 150; circle0.vy = 80; }
function doAnim()
{ var r = circle0.r.baseVal.value;
var boxWidth = svgElement.width.baseVal.value;
var boxHeight = svgElement.height.baseVal.value;
circle0.cx.baseVal.value += s2d(circle0.vx);
circle0.cy.baseVal.value += s2d(circle0.vy);
if (circle0.cx.baseVal.value >= (boxWidth – r))
circle0.vx *=-1;
if (circle0.cy.baseVal.value >= (boxHeight – r))
circle0.vY *=-1;
//clearInterval(timer);
}
</script>
</head>
<body onload=”init();”>
<svg id=”svgElement” width=”800px” height=”600px” viewBox=”0 0 800 600″>
<rect x=”0″ y=”0″ width=”100%” height=”100%” rx=”10″ ry=”10″ style=”fill: white; stroke: black;” />
<circle id=”circle0″ cx=”40″ cy=”40″ r=”40″ style=”fill: orange; stroke: black; stroke-width: 1;” />
</svg>
</body>
</html>
ลูกบอลชนข้างแล้วจะเด้งกลับ
