Question

I have a image which i would like to animate on my web page.

Currently i am using a gif.

http://dev.thepenline.com/TEMP/Hol_10_swingingBell.gif

I would like to have more control on its animation, which js lib/framework would be best to help me out?

Should i use canvas or SVG?
Which (small) library is best to use?

I happen to know a little raphael.js
But i am not sure how to get this effect done.

Answer 1

I’ve done something with SVG that’s close to what you’re trying to achieve: http://live.echo-flow.com/stackoverflow/clock.svg

In case I ever take the example down, here’s the relevant code.

clock.svg:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">

<rect x="0" y="0" height="100" width="100" fill="none" stroke="blue" id="border"/>

<script type="text/ecmascript" xlink:href="clock.js"></script>

</svg>

clock.js:

var svgRoot = document.documentElement;
var svgNS = "http://www.w3.org/2000/svg";

var ident = svgRoot.createSVGMatrix();

function Pendulum(thetaZero,period,tempo,fillColor){

        //sensible default values
        thetaZero = thetaZero || 0;
        period = period || 20;
        tempo = tempo || 20;
        fillColor = fillColor || "red";

        if(fillColor == "randomize"){
                fillColor = "rgb(" + Math.random() * 254 +
                                "," + Math.random() * 254 +
                                "," + Math.random() * 254 + ")";
        }

        //construct his representation in DOM
        var g = document.createElementNS(svgNS,"g");
        g.setAttributeNS(null,"transform","translate(50,20) rotate(" + thetaZero + ")");

        var rotateTransform = g.transform.baseVal.getItem(1);

        var path = document.createElementNS(svgNS,"line");
        path.setAttributeNS(null,"x1",0);
        path.setAttributeNS(null,"y1",0);
        path.setAttributeNS(null,"x2",0);
        path.setAttributeNS(null,"y2",40);
        path.setAttributeNS(null,"stroke","black");

        var c = document.createElementNS(svgNS,"circle");
        var styleString = "fill:" +fillColor;
        //console.log(styleString);
        c.setAttributeNS(null,"cx",0);
        c.setAttributeNS(null,"cy",50);
        c.setAttributeNS(null,"r",10);
        c.setAttributeNS(null,"style",styleString);
        c.setAttributeNS(null,"stroke","black");
        c.setAttributeNS(null,"opacity",.5);
        g.appendChild(path);
        g.appendChild(c);

        svgRoot.appendChild(g);

        this.node=g;

        //timeout

        var timeStep = 10; //in milliseconds
        var timeCount = 0;
        var _animateTimeStep = function(){
                timeCount++;

                var adjustedTimeCount = timeCount/tempo;

                //compute theta
                //theta(t) = period * sin(t + thetaZero)
                var theta = period * Math.sin(adjustedTimeCount  + thetaZero);

                //set his current rotate transformation to the new theta
                rotateTransform.setMatrix(ident.rotate(theta));
        }

        var timerId = null;

        //method definitions
        this.go=function(){
                timerId = window.setInterval(_animateTimeStep,timeStep);
        };

        this.stop=function(){
                window.clearInterval(timerId);
        };
}


//Pendulum(thetaZero,period,tempo,fillColor)
var p1 = new Pendulum(-10,20,40,"red");
p1.go();

var p2 = new Pendulum(20,20,40,"yellow");
p2.go();

var p3 = new Pendulum(-20,20,40,"blue");
p3.go();

var p4 = new Pendulum(10,20,40,"purple");
p4.go();