流畅的JavaScript动画 [英] Smooth javascript animation
问题描述
下面是一些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>
正如你可以看到，它在网页动画DIV，但动画并不清晰流畅 - DIV的边境实际变形。
有人知道我可以使它正常工作？
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?
推荐答案
同上JustLoren：它工作正常，我的机器上。我不知道你的边界是什么意思'变形'...也许你谈论撕裂 ？如果是的话，恐怕没有什么可以做的。
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.
传统的解决方案，以撕裂等待垂直同步提醒你下架，但这种能力是无法在JavaScript中。没有框架可以修复它。 （框架粉丝：！使用它my_favourite_framework解决所有问题。请停止提示为JavaScript问题你不明白）
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.)
由于mck89建议，你当然可以使动画更流畅通过绘制更多的图像，在拍摄更多的CPU能力来执行费用（可降低撕裂太的影响）。您可能还preFER保持一个变量来存储你的x值，而不是从currentStyle每次解析它。这将是简单，通过浏览器更广泛的支持。
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重新注释：这里没有JS混凝土最小超时（我可以把它降低到1毫秒有时），但你可以有多少FPS走出动画的高度依赖于浏览器和机器的力量，这就是为什么通常这是一个好主意，基地位置/对，因为动画开始以来经过的时间框架（使用新的Date（）。的getTime（）），而不是移动/改变一个固定的量每帧。
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.
在任何情况下，关于使用的16毫秒的时间间隔，其对应于60Hz的显示器上一帧（通常的平板默认值）。
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).
这篇关于流畅的JavaScript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
