0

我正在努力理解如此简单的数学，至少它看起来应该很简单。

我基本上是在尝试反映 jQuery 的.animate功能，但没有运气。

这是我到目前为止的简化版本：

var args = {
  speed: 1000, // 1 second.
  left: 65 // distance.
}, rot, step;

// Terrible math.
rot = step = (((args.left / args.speed) * 10) - 0.10);

var t = setInterval(function() {
  if(elem.style.left >= args.left) {
    clearInterval(t);
    return;
  }
  rot += step;
  elem.style.left = rot;
}, 10);

请原谅任何不合逻辑的代码（或数学），我已经搞砸了好几个小时，完全失去了理智。

4

3 回答 3

1

编辑：

这是我会做的方式。

var start_time = Date.now();
// Get the starting time in milliseconds

var t = setInterval(function() {

    var delta_time = Date.now() - start_time;
    // Get time that has elapsed since starting

    if (delta_time >= 1000) {
        // if it's been a second

        clearInterval(t);
        // Stop the timer

        elem.style.left = args.left + 'px';
        // Set the element to exactly the value it should be (avoids having it set to a float value)

        return;
    }

    elem.style.left = delta_time * args.left / args.speed + 'px';
    // Move the element according to how much time has elapsed

}, 10);​

这种方法有几个优点。例如，您可以调整间隔以使其或多或少平滑，并且不会弄乱动画。

您的解决方案花费超过一秒钟的原因是因为您使用setInterval. setInterval不考虑您的代码运行所需的时间，因此总时间总是会增加一点。您可以通过使用增量计时（如我的示例）来解决此问题。

于 2012-09-13T05:26:53.657 回答
0

好吧，它应该是

var args = { ... }

假设您已正确设置了 elem，您将需要一个要设置动画的属性的内联样式。此外，您将需要解析样式，因为它附加了“px”，但您始终可以在区间函数中进行数学运算后添加它。

我在这里设置了一些东西，这样你就可以搞乱设置等等。

编辑：http: //jsfiddle.net/mb4JA/2/

edit2：这应该是一秒 http://jsfiddle.net/mb4JA/4/

最终答案 ;) http://jsfiddle.net/mb4JA/10/

您应该能够在其中设置任何速度，并让它在该秒数内进行动画处理。

于 2012-09-13T05:24:26.907 回答
0

尝试使用 sin 和 cos 来计算旋转 像这样

newx = distance * Math.cos(direction) + x
newy = distance * Math.sin(direction) + y

不确定，这会解决你的问题我猜你想做一个平滑的旋转

尝试将其作为一个可以工作的函数，我在你的数学中没有看到任何问题，

像这样

function move(elem) {

var left = 0

function frame() {

left++  // update parameters

elem.style.left = left  // show frame

if (left == 100)  // check finish condition
clearInterval(id)
}

var id = setInterval(frame, 10) // draw every 10ms
}
于 2012-09-13T05:30:22.093 回答