开发者

Basic syntax for an animation loop?

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 writ开发者_JAVA技巧ing 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!


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜