Question

使用javascript移动元素的最佳做法是什么？你是否使用超时或间隔？定时事件持续10毫秒是不是很糟糕，还是精确的？你是逐个像素地移动，还是总距离的一定比例？如果使用间隔，当元素处于适当位置时如何停止间隔？

最后两次我在javascript中看到过javascript和Raphael.js的动作，我都无法理解它的源代码。在任何地方都有一些很好的教程或代码示例吗？有没有jQuery使用的方法的简单解释？

Answer 1

最近有一个叫requestAnimationFrame的函数，它尽快运行一个函数。这是一个很好的做法，因为它已经制作用于动画目的。

它在编码方面的工作方式与setTimeout相同，例如功能完成后，您可以拨打requestAnimationFrame。

在函数中，您将获取当前时间以查看当时应如何定位对象。

您可以使用cancelRequestAnimationFrame取消待处理的函数，并传递requestAnimationFrame的返回值。

目前，这不是跨浏览器，并且这些功能是以供应商为前缀的，例如Chrome浏览器webkitRequestAnimationFrame。

例如：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);
}

Answer 2

在这里你可以找到一个很好的Javascript动画教程： http://www.schillmania.com/content/projects/javascript-animation-1

但你说的是对的。 Jquery Animate使用setTimeout，根据持续时间，位置和缓动的计算移动对象。

Answer 3

我认为，间隔是优选的，因为您只在代码中设置一次而不是每帧一次。它只需要读取一次代码并重复使用几次，而不是每次创建时都读取它。

10ms有点短。计算机本身可以支持大约16ms的间隔，然后可以使用更精确的定时器来实现更快的间隔，但是这些定时器非常耗电。 IE9支持两者，具体取决于计算机的电源设置，但理想情况下，您不需要超过50毫秒（20 FPS）的任何速度。

我喜欢根据动画开始后经过的时间移动总距离的一小部分。这样，无论计算机和浏览器的速度如何，动画总是花费相同的时间。保证。

类似的东西：

interval = setInterval(function() {
    // do stuff
    if( /*animation ended*/) clearInterval(interval);
},time);

对某些人来说jQuery很容易，但我个人觉得没有什么可以用简单的旧JS自己编写。更容易理解究竟发生了什么，而不是依赖某些框架来使它适合你。

用javascript移动元素

3 个答案: