Question

I know that jQuery, for example, can do animation of sorts. I also know that at the very core of the animation, there must me some sort of loop doing the animation. What is an example of such a loop?

A complete answer should ideally answer the following questions:

• What is a basic syntax for an effective animation recursion that can animate a single property of a particular object at a time? The function should be able to vary its target object and property of the object.
• What arguments/parameters should it take?
• What is a good range of reiterating the loop? In milliseconds? (Should this be a parameter/argument to the function?)

REMEMBER:

• The answer is NOT necessarily language specific, but if you are writing in a specific language, please specify which one.
• Error handling is a plus. {Nothing is more irritating (for our purposes) than an animation that does something strange, like stopping halfway through.}

Thanks!

Answer 1

typically (for jQuery at least) this is not done in a loop, but rather in a series of callbacks.

pseudojavascript:

function startAnimation(element, endPosition, duration) {
    var startPosition = element.position;
    var startTime = getCurrentTime();
    function animate() {
        var timeElapsed = getCurrentTime() - startTime;
        if (timeElapsed > duration) {
            element.position = endPosition;
            stopTimer();
        } else {
            // interpolate based on time
            element.position = startPosition +
                (endPosition - startPosition) * timeElapsed / duration;
        }
    }
    startRepeatingTimerWithCallbackAndInterval(animate, 1.0 / 30.0);
}

It’s also possible to use objects to store starting data instead of closures.

This doesn’t completely answer all the points in the question, but it’s a starting point.