Equation Driven Animation

[AdrianPC]

Hey everyone, I'm working on a highly interactive site and I'm looking for some help with animating certain parts. I'm using some pretty high level math and deriving complex equations to model the motion, but it will basically come down to inputting a time and the equation will output an X-Y coordinate. My question is what is the best way to animate these items? I've seen examples of people using setTimeout to update an item's properties by looping through and constantly calling that, but to me it seems like it might be a bit computationally intensive and the performance wouldn't quite be there. I considered using setTimeout with a combination of CSS3 transitions so I could make less setTimeout calls, but I'm curious if there's other options. These items I'm moving are being dynamically created and destroyed at different times (but not often) as well, so I'm curious, SVG or Canvas? So far I've been using SVG and it sounds like the best approach but I haven't found a very good resource to learn from. Thanks for any help! For those who are curious:I'm using some structural analysis techniques for elastic beam behaviour for deflections and rotations with a mixture of vector dynamics for momentum and spring motion.

Edited December 21, 2012 by AdrianPC

[Ingolme]

If it's the same function being called over and over, a call to setInterval() is good for animation.SVG is for vectors and canvas is for raster graphics. SVG is better if you have a single object and want to move it, because you don't have to worry about redrawing. However, the object you draw can't be very complex.