代码之家  ›  专栏  ›  技术社区  ›  Olical

JavaScript大小动画的问题

  •  0
  • Olical  · 技术社区  · 15 年前

    我正在编写一个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';
    }
    

    1 回复  |  直到 15 年前
        1
  •  1
  •   Gabriele Petrioli    15 年前

    应该是 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