By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,869 Members | 1,756 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,869 IT Pros & Developers. It's quick & easy.

setTimeOut vs time-based animation

P: n/a

I've recently created a dhtml thing on 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?



Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply

P: n/a
On Sun, 19 Oct 2003 11:00:43 GMT
as** (Brainless) wrote:
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();
cur = (cur + 1) % frames.length;

this.SingleStepBackward = function() {
if(isRunning) this.Stop();
cur = (cur + frames.length - 1) % frames.length;

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

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

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

Life is an offensive, directed against the repetitious mechanism of the
--Alfred North Whitehead (1861-1947)
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.