3

Here is some code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { margin:0; padding:0; }
#a {
    position:absolute;
    background:#0FF;
    left:0;
    height:300px;
    width:120px;
}
input, #a {
    margin:10px;
}
</style>
<script>
function foo() {
    box = document.getElementById('a');
    var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
    box.style.left = parseInt(computedStyle.left) + 10 + 'px';
    setTimeout("foo()",20);
}
</script>
</head>

<body>
<input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)">
<div id="a"></div>
</body>
</html>

As you can see, it animates DIV at page, but animation isn't clear and smooth — border of DIV actually deforming. Somebody know how i can make it work correctly?

Improve this question
2
  • Could you please define "deformed" ... it behaves as expected on my machine. Commented Aug 24, 2009 at 12:58
  • Looks like "VSync turned off" in 3D Games Commented Aug 24, 2009 at 14:19

4 Answers 4

Reset to default
9

Ditto JustLoren: it works fine on my machine. I'm not sure what you mean by the border ‘deforming’... maybe you're talking about tearing? If so, I'm afraid there is nothing you can do about it.

The traditional solution to tearing is to wait for vsync to draw your next frame, but that ability is not available in JavaScript. No framework can fix it. (Framework fans: please stop suggesting “Use my_favourite_framework! It solves all problems!” to JavaScript questions you don't understand.)

As mck89 suggests, you can certainly make the animation smoother (which can reduce the impact of tearing too) by drawing more frames, at the expense of taking more CPU power to perform. You might also prefer to keep a variable to store your x value, rather than parsing it from the currentStyle every time. It would be simpler and more widely supported by browsers.

ETA re comment: There's not a concrete minimum timeout in JS (I can get it down to 1ms sometimes), but how many fps you can get out of an animation is highly dependent on the browser and the power of the machine, which is why generally it's a good idea to base position/frame on the amount of time that has elapsed since the start of the animation (using new Date().getTime()) rather than moving/changing a fixed amount each frame.

In any case, about the fastest you can practically go is using an interval of 16ms, which corresponds to one frame on a 60Hz monitor (the usual flatscreen default).

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Increasing FPS is good and simple way, but seems browsers don't suppord it( Look: function foo() { box = document.getElementById('a'); var computedStyle = box.currentStyle || window.getComputedStyle(box, null); box.style.left = parseInt(computedStyle.left) + 1 + 'px'; setTimeout("foo()",10); } It looks smooth. but moves slow, because minimal interval in JS in 10ms |=> Maximum speed is 100px per sec. ((
I know this topic is old but I when I read: "there's not a concrete minimum timeout in JS" after reading "stop suggesting [solutions] to JavaScript questions you don't understand" I just have to say something. Please read ejohn.org/blog/analyzing-timer-performance
0

You should increment the left coordinate by 1 px and set a lower time for the interval.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { margin:0; padding:0; }
#a {
    position:absolute;
    background:#0FF;
    left:0;
    height:300px;
    width:120px;
}
input, #a {
    margin:10px;
}
</style>
<script>
function foo() {
    box = document.getElementById('a');
    var computedStyle = box.currentStyle || window.getComputedStyle(box, null);
    box.style.left = parseInt(computedStyle.left) + 1 + 'px';
    setTimeout("foo()",1);
}
</script>
</head>

<body>
<input type="button" value="RUN, FORREST, RUN!" onClick="setTimeout('foo()',20)">
<div id="a"></div>
</body>
</html>
Improve this answer

1 Comment

Yeah. I tryed it. With 1px step it looks nice, but moves to slow. Seems like minimal timeout in most browsers in 10ms, that's why object moves not too fast
-4

JQuery and YUI and almost every other js library provides animation utility, perhaps you should look into those.

Improve this answer

2 Comments

I love the down votes without a comment. Not very constructive if you ask me.
You're right, not very constructive. My opinion: jQuery and YUI don't solve the "smoothness" problem too. They are easier to code in but have the same problem. I'm looking for a solution but still didn't find any. Cheers.
-4

In my experience, mootools (http://mootools.net) provides the smoothest animation.

Improve this answer

1 Comment

Same reason people learn to play music instrument. There are many great albums in the world, but people are still reinventing the wheel. They are learning to play their own music :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.