ansaurus

Question

Smooth javascript animation

Answer 1

A:

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

Zoidberg 2009-08-24 12:57:07

Answer 2

A:

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

Jeff Ober 2009-08-24 12:58:40

Answer 3

A:

Why not use JQuery for moving the div?

The link above has an example of moving a div. just like yours but smooth ;-)

Shoban 2009-08-24 12:59:29

Later I will need to change direction of movement immediately. Not a simple "roll to right". And jQuery.animate don't make it correctly

2009-08-24 14:33:33

Answer 4

A:

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"&gt;
<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>

mck89 2009-08-24 13:01:21

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

2009-08-24 14:37:23

Answer 5

+3 A:

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).

bobince 2009-08-24 14:27:24

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. ((

2009-08-24 14:47:15

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 http://ejohn.org/blog/analyzing-timer-performance/

David Murdoch 2009-12-08 14:40:21

ansaurus

tags:

views:

answers:

Smooth javascript animation

related questions