animation behavior

J

J. J. Cale

Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">
<img id="cardRun" src="0.gif" width=70 height=99 alt="" border="0">
</BODY></HTML>
 
G

Grant Wagner

J. J. Cale said:
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">
Click to expand...

You don't say what OS you're using but Windows 95/98/ME's timer is only
accurate to about 55ms, so you're calling setInterval() 5 times for each
period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period,
resulting in some sort of slowdown. Gecko-based browsers may be increase
the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and
IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.
 
R

rh

J. J. Cale said:
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.
Click to expand...
<...>

With IE, you get one page rendering per timer interval (about 55ms on
Win 95/98), so the only thing you can do to speed up the animation is
to reduce the number of renderings. Here's an example:

<script type="text/javascript">
/*JRS*/
/**/function animate( ) {
/**/ var stopLeft = 350;
/**/ var el = document.images['cardRun'];
/**/ function runCard( ) {
/**/ var rateFactor = 0.3;
/**/ var offset = Math.max( el.offsetLeft -
/**/ ( (el.offsetLeft - stopLeft ) * rateFactor) | 0, stopLeft );
/**/ el.style.left = offset + 'px';
/**/ if ( offset <= stopLeft ) clearInterval( TID );
/**/ }
/**/ var TID = setInterval( runCard, 50 )
/**/}
/*JRS*/
</script>

which can be initiated with:

<BODY onload="setTimeout( 'animate()', 1000 )">

Of course, this reduces Mozilla (and friends) to the same level, so you
may wish to alter the approach based on the browser that's running.
..
../rh
 
R

rh

You don't say what OS you're using but Windows 95/98/ME's timer is only
accurate to about 55ms, so you're calling setInterval() 5 times for each
period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period,
resulting in some sort of slowdown. Gecko-based browsers may be increase
the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and
IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.
Click to expand...

Interestingly, though, the animation in the OP's example is smoother in
Mozilla, Firefox and Netscape on Win/98. Also, there's a noticeable
difference between the interval being set to 10 versus 55 in these
browsers, which suggests that there's more than one rendering being
done per timer resolution cycle with the lowered setting.

It also appears that some care is required in setting the interval
value. A value of 55 causes Opera 7.1 to miss cycles, having the effect
of bumping to the next level (~ 110ms) .
..
../rh
 
J

J. J. Cale

Grant Wagner said:
J. J. Cale said:
Hi all
I get different speeds from this animation in IE6 and Mozilla.
Mozilla 1.7.3 runs this much faster than IE . I'm trying to get
the results that Mozilla returns. IE is too slow!!
Anyone know why? Is my code flawed and one browser is
interpreting it correctly? Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML><HEAD><TITLE>Animate Card test</TITLE>
<style type=text/css>
#cardRun {
position:absolute;
left:600px;
top:120px;
}
</style>
<script type="text/javascript">
var TID = null;
function runCard() {
var el = document.images['cardRun'];
if (el.offsetLeft <= 350) clearInterval(TID);
el.style.left = el.offsetLeft - 10 + 'px';
}
</script></HEAD>
<BODY onload="TID=setInterval('runCard()',10)">
Click to expand...

You don't say what OS you're using but Windows 95/98/ME's timer is only
accurate to about 55ms, so you're calling setInterval() 5 times for each
period Windows 95/98/ME can actually resolve.

IE may be trying to honor those requests, stacking 5 up for each period,
resulting in some sort of slowdown. Gecko-based browsers may be increase
the setInterval() period to only perform the request as fast as the
underlying OS can go.

The code seems to work about the same in Mozilla 1.7.5, FireFox 1.0 and
IE 6.0.2800 under Windows XP. Also tested in IE 6.0.2900.

<img id="cardRun" src="0.gif" width=70 height=99 alt="" border="0">
</BODY></HTML>
Click to expand...
Click to expand...
Grant hi
Yes I'm running win98! You reckon this is OS specific. I've since tried
using different cycle times but the results are the same for my two
browsers. I've decided to give up on the animation for now. I was just
trying to simulate dealing a card in case anyone has a ready routine. (No
Flash just javascript) Thanks for the reply.
Jimbo
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Mon, 10 Jan 2005 10:27:21, seen in rh
It also appears that some care is required in setting the interval
value. A value of 55 causes Opera 7.1 to miss cycles, having the effect
of bumping to the next level (~ 110ms) .
Click to expand...

That's not unreasonable, since the true average interval is about
54.925495 milliseconds of the nominal clock.

If complete regularity is desired, try setTimeout, recalculating the
delay each time and subtracting a suitable bias.
 
R

rh

Dr said:
JRS: In article
Click to expand...
, dated Mon, 10 Jan 2005 10:27:21, seen in rh


That's not unreasonable, since the true average interval is about
54.925495 milliseconds of the nominal clock.
Click to expand...

That would be the theory (and I'm not arguing).

The caution was more to do with my recollection of seeing the value
"55" used in some setTimout/setInterval examples in this group some
time ago (undoubtably in relation to Win95/98). Whereas it seems that
IE doesn't bump until around a value of 56, Opera does so at 55. So if
you want a minimum time between events, you want to use something less
than 55.

Given that recent systems provide better timer resolution, and in cases
where maximum events are desired, it may be reasonable to use a value
of 1ms for setInterval, which should result the minimum latency that
can be delivered by the system.
If complete regularity is desired, try setTimeout, recalculating the
delay each time and subtracting a suitable bias.
Click to expand...

Perhaps I'll let you try that :), because I'm a little doubtful about
acheiving success, particularly cross-browser, in this way. Not that it
isn't a good idea -- it's just that in this area nothing is as simple
and straightforward as one might like it to be.

For example, timing tests in the Mozilla family produce the expected
results of ~55ms for setInterval invocation with values in the range of
1-55. E.g., see Lasse's test at:

<url: http://www.infimum.dk/privat/timercheck3.html >

However, the first set of timing events appear to be delivered in well
under the ~55ms level. For example, using the OP's sample code with a
setInterval of 10ms, the animation is completed with an average of
~13ms per iteration.

Nonetheless, putting the animation in a loop, it gradually slows, as
the iteration interval appears to work its way up toward the 55ms
level.

This sort of behaviour doesn't seem to be particularly tractable to me.
..
../rh
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Please Help? 0
Google gauge chart 2
Help With a Script 5
JavaScript: how to keep track of the circle in canvas on specific path? 0
Snowing Effect 2
Help with my responsive home page 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0

Members online

No members online now.
Total: 241 (members: 0, guests: 241)
Robots: 294

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top