Horizontal Animation
var from = 0;
var to = 90;
var diff = to - from;
var dur = 10 * 1000; // in milliseconds
var speed = 33;
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
svgRoot = svgDocument.documentElement;
advance();
}
function advance() {
var elapsed = svgRoot.getCurrentTime() * 1000;
var percent = elapsed % dur / dur;
var x = from + percent * diff;
rect.setAttributeNS(null, "x", x);
setTimeout("advance()", speed);
}
Vertical Animation
var from = 0;
var to = 90;
var diff = to - from;
var dur = 10 * 1000; // in milliseconds
var speed = 33;
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
svgRoot = svgDocument.documentElement;
advance();
}
function advance() {
var elapsed = svgRoot.getCurrentTime() * 1000;
var percent = elapsed % dur / dur;
var y = from + percent * diff;
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Diagonal Animation
var from = 0;
var to = 90;
var diff = to - from;
var dur = 10 * 1000; // in milliseconds
var speed = 33;
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
svgRoot = svgDocument.documentElement;
advance();
}
function advance() {
var elapsed = svgRoot.getCurrentTime() * 1000;
var percent = elapsed % dur / dur;
var x = from + percent * diff;
var y = from + percent * diff;
rect.setAttributeNS(null, "x", x);
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Rotation Animation
var from = 0;
var to = 90;
var diff = to - from;
var dur = 10 * 1000; // in milliseconds
var speed = 33;
var radians_per_degree = Math.PI / 180;
function animate(evt) {
var x,y;
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
svgRoot = svgDocument.documentElement;
x = rect.getAttributeNS(null, "x");
y = rect.getAttributeNS(null, "y");
radius = Math.sqrt(x*x + y*y);
advance();
}
function advance() {
var elapsed = svgRoot.getCurrentTime() * 1000;
var percent = elapsed % dur / dur;
var angle = from + percent * diff;
var radian = angle * radians_per_degree;
x = radius * Math.cos(radian);
y = radius * Math.sin(radian);
rect.setAttributeNS(null, "x", x);
rect.setAttributeNS(null, "y", y);
setTimeout("advance()", speed);
}
Animation on a Path
var dur = 10 * 1000; // in milliseconds
var speed = 33;
var rect;
function animate(evt) {
if ( window.svgDocument == null )
svgDocument = evt.target.ownerDocument;
rect = svgDocument.getElementById("rect");
svgRoot = svgDocument.documentElement;
setTimeout("advance()", speed);
}
function advance() {
var elapsed = svgRoot.getCurrentTime() * 1000;
var percent = elapsed % dur / dur;
var point = getBezierPointAt(percent);
rect.setAttributeNS(null, "x", point.x - 5);
rect.setAttributeNS(null, "y", point.y - 5);
setTimeout("advance()", speed);
}