Jump to content

Equation Driven Animation

Recommended Posts

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 by AdrianPC
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...