Question

我很难理解这么简单的数学，至少它看起来应该很简单。

我基本上试图反映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);

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

Answer 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没有考虑代码运行的时间，因此总时间总是增加一点。你可以通过使用增量计时来解决这个问题（就像在我的例子中一样）。

Answer 2

一个人应该是

var args = { ... }

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

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

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

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

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

你应该可以在那里放任何速度，并让它在几秒钟内制作动画。

Answer 3

尝试使用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
}

Javascript动画数学

3 个答案: