Home :: Tutorials :: SVG :: Animation

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);
}