JavaScript 大小动画的问题答案

【问题标题】：A problem with JavaScript size animationJavaScript 大小动画的问题
【发布时间】：2011-04-30 11:27:28
【问题描述】：

我正在编写一个 JavaScript 库，但遇到了一个问题，我有一个调整元素大小的函数，一切正常，但我也有一个动画版本，可以在指定的时间范围内调整它们的大小。该脚本在运行时似乎会冻结，并且似乎取决于我的 while 循环，这是我的代码。

// Resize in timeframe
// Work out distance
var widthDiff = width - element.offsetWidth;
var heightDiff = height - element.offsetHeight;

// Work out pixels per milisecond
var widthppm = widthDiff / timeframe;
var heightppm = heightDiff / timeframe;

// Set up times
var d = new Date();
var endtime = d.getTime() + timeframe;

// Get the original width and height
var oldwidth = element.offsetWidth;
var oldheight = element.offsetHeight;

var iteration;

// Loop through until done
while(d.getTime() >= endtime)
{
    iteration = timeframe - (endtime - d.getTime());
    element.style.width = oldwidth + (iteration * widthppm) + 'px';
    element.style.height = oldheight + (iteration * heightppm) + 'px';
}

我现在只能告诉你的是参数（元素、宽度、高度、时间范围）工作正常，这取决于我的算法。任何帮助都会很棒，谢谢！

【问题讨论】：

标签： javascript html loops while-loop

【解决方案1】：

应该是d.getTime() <= endtime。
强调<= 而不是>=。

此外，您需要在循环中获取一个新的时间戳，因为d.getTime() 将始终相同（创建它的时间）..

所以

while(d.getTime() <= endtime)
{
    iteration = timeframe - (endtime - d.getTime());
    element.style.width = oldwidth + (iteration * widthppm) + 'px';
    element.style.height = oldheight + (iteration * heightppm) + 'px';
    d = new Date();
}

但是您应该使用超时/间隔来制作动画，而不是循环，因为这会阻止其余脚本执行..

这里有一些关于setTimeout 和setInterval 动画的教程

【讨论】：

不，没听懂，但感谢您指出这一点。不敢相信我错过了那个。它仍然以无响应脚本的形式出现。
@Wolfy87，添加了更多信息.. d.getTime() 总是返回相同的值.. 它不是一个正在运行的计时器.. 只是一个时间实例，显示它的创建时间..
在它工作的循环的每次迭代中重新创建 d 变量后，虽然它仍然没有动画，但它只是坐在那里直到时间到然后移动。感谢您的帮助！
@wolfy，这就是 DOM 的工作方式.. javascript 中的循环将在循环运行时阻止其他任何事情发生。这就是为什么我提到你应该真正使用setTimeout 或setInterval 方法。有了这些，您可以创建定时回调，使您的动画向前移动，而页面的其余部分继续工作..
我明白了，我需要 1 毫秒的间隔吗？