使用 javascript 移动元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7940661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving elements with javascript
提问by mowwwalker
What are the best practices for moving elements with javascript? Do you use timeouts or intervals? Is it bad to have timed events for 10 milliseconds, or will it be precise? Do you move pixel by pixel, or a certain fraction of the total distance? If you use intervals, how do you stop the interval when the element is in position?
使用 javascript 移动元素的最佳实践是什么？你使用超时还是间隔？有 10 毫秒的定时事件是不好的，还是精确的？你是一个像素一个像素地移动，还是总距离的某个部分？如果使用间隔，当元素到位时如何停止间隔？
The last two times I've seen motion in javascript have been with jQuery and Raphael.js, neither of which I can understand the source code of. Are there some good tutorials or code examples anywhere? Is there a simple explanation of the methods jQuery uses?
我最近两次在 javascript 中看到动作是使用 jQuery 和 Raphael.js，我都看不懂它们的源代码。是否有一些好的教程或代码示例？是否有对 jQuery 使用的方法的简单解释？
采纳答案by Afonso Fran?a
Here you can find a good Javascript Animation tutorial: http://www.schillmania.com/content/projects/javascript-animation-1
在这里你可以找到一个很好的 Javascript 动画教程：http: //www.schillmania.com/content/projects/javascript-animation-1
But what you said is right. Jquery Animate uses setTimeout, moving the object based in calculations of duration, position and easing.
不过你说的是对的。Jquery Animate 使用 setTimeout，根据持续时间、位置和缓动的计算移动对象。
回答by pimvdb
There is a recent function called requestAnimationFramewhich runs a function as soon as possible. This is a good practice since it has been madefor animation purposes.
最近调用requestAnimationFrame了一个函数，它会尽快运行一个函数。这是一个很好的做法，因为它已经做动画的目的。
The way it works in terms of coding is the same as setTimeout, e.g. when the function finishes you call requestAnimationFrame.
它在编码方面的工作方式与setTimeout例如当函数完成时调用相同requestAnimationFrame。
In the function, you fetch the current time to see how the object should be positioned at that time.
在该函数中，您获取当前时间以查看该对象在该时间应如何定位。
You can cancel a pending function it with cancelRequestAnimationFrame, passing the return value of requestAnimationFrame.
您可以使用 取消挂起的函数cancelRequestAnimationFrame，传递 的返回值requestAnimationFrame。
Currently this is not cross-browser and the functions are vendor-prefixed, e.g. webkitRequestAnimationFramefor Chrome.
目前这不是跨浏览器的，并且功能是供应商前缀的，例如webkitRequestAnimationFrame对于 Chrome。
E.g.: http://jsfiddle.net/pimvdb/G2ThU/1/.
例如：http: //jsfiddle.net/pimvdb/G2ThU/1/。
var div = document.getElementById('div');
var animation;
function move() {
var time = Math.round((new Date()).getTime() / 10) % 200;
div.style.left = time + 'px';
animation = requestAnimationFrame(move);
}
document.getElementById("start").onclick = function() {
animation = requestAnimationFrame(move);
}
document.getElementById("stop").onclick = function() {
cancelRequestAnimationFrame(animation);
}
回答by Niet the Dark Absol
Intervals are preferable, I believe, because you only set it once in the code rather than once per frame. It only needs to read the code once and reuse it several times, rather than reading it every time it is created.
我相信间隔更可取，因为您只在代码中设置一次，而不是每帧设置一次。它只需要读取一次代码并重复使用它几次，而不是每次创建时都读取它。
10ms is a bit short. The computer can natively support intervals of about 16ms, then more precise timers can be used for faster intervals, however these are very power-consuming. IE9 supports both, depending on the computer's power settings, but ideally you shouldn't need anything faster than 50ms (20 FPS).
10ms 有点短。计算机本身可以支持大约 16 毫秒的间隔，然后可以使用更精确的计时器来实现更快的间隔，但是这些非常耗电。IE9 支持两者，具体取决于计算机的电源设置，但理想情况下，您不需要任何超过 50 毫秒 (20 FPS) 的速度。
I like to move a fraction of the total distance, based on the time that has passed since the animation started. This way, no matter what the speed of the computer and browser, the animation will always take the exact same amount of time. Guaranteed.
我喜欢根据动画开始后经过的时间移动总距离的一小部分。这样，无论计算机和浏览器的速度如何，动画将始终花费完全相同的时间。保证。
Something like:
就像是：
interval = setInterval(function() {
// do stuff
if( /*animation ended*/) clearInterval(interval);
},time);
jQuery is easy for some, but personally I find nothing beats writing it yourself in plain, old JS. Much easier to understand what's going on exactly, rather than relying on some framework to get it right for you.
jQuery 对某些人来说很容易，但我个人觉得没有什么比自己用普通的旧 JS 编写更好的了。更容易理解到底发生了什么，而不是依赖某个框架来为你准备好。
