setTimeOut vs time-based animation

[Brainless]

hi...

I've recently created a dhtml thing on http://www.shapers.nl/ that
animates a lot of images. The thing I want to solve is the lag that
occurs when a new animation is initiated.

To make it time-based I calculate the entire animation on beforehand
and create numerous setTimeOuts in a repeat loop (it's the loop that
creates the lag).
Creating an animation like this has some more disadvantages:
- it's 'difficult' to suddenly end the animation (you'd have to kill
all remaining setTimeOuts)
- setTimeOut is an inaccurate way of animating: the position of an
image might be changed twice per cycle or (the other way around) a
position could change once per two cycles

I need to code something that calculates the position of an image
every cycle. To do this I need the deltaT (= milliseconds between
cycles), and for that I need some sort of event (or workaround) that
occurs every cycle (and works both in IE and Mozilla).

I've tried calculating deltaT with a setTimeOut('getDeltaT()',1) and
with the mouseMove event but both seem slightly inaccurate since they
sometimes return deltaT=0.

anybody got a solution?

grtz...

Ron

[Albert Wagner]

On Sun, 19 Oct 2003 11:00:43 GMT
as**@asdf.as (Brainless) wrote:
<snip>
Based on your explanation I can't figure out exactly how you are
approaching animation. But I suspect that you need to explore
setInterval() rather than setTimer(). I precalculate positions and build
all frames in an animation first, then just let the timer interrupt
drive the iteration of frames. I use a separate timer for each
concurrently running animation.
var cur = 0;
var interval_ID = false;
var isRunning = false;

this.SingleStepForward = function() {
if(isRunning) this.Stop();
frames[cur].hide();
cur = (cur + 1) % frames.length;
frames[cur].show();
};

this.SingleStepBackward = function() {
if(isRunning) this.Stop();
frames[cur].hide();
cur = (cur + frames.length - 1) % frames.length;
frames[cur].show();
};

this.Stop = function(){
//if (inHarness) tprint(this.name + ".Stop()");
if (interval_ID) {
window.clearInterval(interval_ID);
};
isRunning = false;
};

this.Run = function() {
if(isRunning) {
this.Stop;
return;
};
isRunning = true;
interval_ID = window.setInterval(this.OnClockTick,
this.interval);
};

this.OnClockTick = function() {
if(isRunning) {
if(frames[cur].waitCnt <= 0) { //if not waiting...
frames[cur].hide(); // hide what is showing
cur = (cur + 1) % frames.length; // calc next
frames[cur].show(); // show next
frames[cur].waitCnt = frames[cur].duration - 1; // set
next wait

}else{ // ignore tick if waiting
frames[cur].waitCnt--;
};
}else{
this.Stop;
};
};

--
Life is an offensive, directed against the repetitious mechanism of the
Universe.
--Alfred North Whitehead (1861-1947)