Frame by frame animation on webpage

I currently have a MySQL table populated like this:

frameid     name     mdsx     mdsy     radius
      1        a        #        #          #
      1        b        #        #          #
      1        c        #        #          #
      2        d        #        #          #
      2        e        #        #          #
      2        b        #        #          #
      3        g        #        #          #
      3        h        #        #          #
      3        i        #        #          #
      3        b        #        #          #
      4        k        #        #          #
      4        l        #        #          #
      4        m        #        #          #
      4        b        #        #          #

I'm trying to cycle through the whole table and draw circles onto the page at the given x and y values with the given radius, labeled with the name. Once I have one frame done, I wait 7 seconds, and check the next frame. If a circle is in the next frame that was in t开发者_运维百科he old one, I have an animation move it to the new position. All circles that don't exist in the new frame but where in the old one are removed.

I'm currently using PHP inside of a <script> to loop through all the frames and make one huge script. The end result looks like this:

<script type="text/javascript">
    var paper = Raphael(0, 100, 900, 500);

    setTimeout(function() {
        a = paper.circle(#, #, #);
        a_t = paper.text(#, #, "a");

        b = paper.circle(#, #, #);
        b_t = paper.text(#, #, "b");

        c = paper.circle(#, #, #);
        c_t = paper.text(#, #, "c");        
    }, 0);

    setTimeout(function() {
        //REMOVE ALL THE OLD ONES THAT DON'T EXIST IN NEW FRAME
        a.remove();
        a_t.remove();

        c.remove();
        c_t.remove();

        //ADD NEW NODES
        d = paper.circle(#, #, #);
        d_t = paper.text(#, #, "d");

        e = paper.circle(#, #, #);
        e_t = paper.text(#, #, "b");

        //ANIMATE NODES THAT STILL EXISTS
        b.animate({cx: #, cy:#, r:#}, 2000);
        b_t.animate({cx: #, cy:#, r:#}, 2000);
    }, 7000);

    setTimeout(function() {
        //REMOVE ALL THE OLD ONES THAT DON'T EXIST IN NEW FRAME
        d.remove();
        d_t.remove();

        e.remove();
        e_t.remove();

        //ADD NEW NODES
        g = paper.circle(#, #, #);
        g_t = paper.text(#, #, "g");

        h = paper.circle(#, #, #);
        h_t = paper.text(#, #, "h");

        i = paper.circle(#, #, #);
        i_t = paper.text(#, #, "i");

        //ANIMATE NODES THAT STILL EXISTS
        b.animate({cx: #, cy:#, r:#}, 2000);
        b_t.animate({cx: #, cy:#, r:#}, 2000);
    }, 14000);

    etc...
</script>

The problem with this is, firstly, I don't think I should have to do it all in one big script. Can I split this up so I don't have to wait for it to generate the whole script before it starts to execute? Should I be creating each node and label by itself as it's own node? I feel like this is wasting processing power.

I'm attempting to add a feature where the user can mouseover a circle and some information will appear. However, it's impossible to read in 7 seconds before it vanishes. Is there a way to pause everything when the user mouses over a circle and have it resume when they mouseout? I feel like this isn't possible with setTimeout, but I have't been able to find anything else.

Is Raphael even the right choice?

Thanks!

I'm currently using PHP inside of a to loop through all the frames and make one huge script.

That's not the right approach, you should rather generate a JavaScript array using PHP then read it in JavaScript.

Is there a way to pause everything when the user mouses over a circle and have it resume when they mouseout?

That's going to be difficult with your current approach. Look at this answer to get some idea of a better implementation.

Is Raphael even the right choice?

It depends on the level of control you want. Google "animated javascript graph library" to see if some lib could maybe save you some time.