发表新帖
发表新帖

Smooth javascript animation

后端 未结
关注
4 932
独厮守ぢ
独厮守ぢ 2021-01-06 06:40

Here is some code:
相关标签:
4条回答
  • 感动是毒
    2021-01-06 06:53

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

    0 讨论(0)
  • 借酒劲吻你
    2021-01-06 07:01

    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>
    0 讨论(0)
  • 再見小時候
    2021-01-06 07:05

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

    0 讨论(0)
  • 南旧
    2021-01-06 07:13

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

    0 讨论(0)
 看不清?
提交回复
热议问题