javascript - 使用 setTimeout 缓出

Question

我正在尝试创建一个老虎机类型的动画，其中将循环显示电子邮件列表。我希望动画能够快速开始，但逐渐变慢直到停止。你会如何建议我做这样的事情？我目前正在做类似的事情:

$(function(){

  wait = 1;
  threshold = 100;
  timer = setTimeout(swap_email,wait);

});

function swap_email() {

  wait = wait + 1;

  if(threshold <= wait) {

    // Update the email div....
    timer = setTimeout(swap_email, wait);   

  }

  else {

    // We're done!        

  }

}

Answer 1

缓动/补间是时间的函数。你告诉你的函数已经过去了多少时间，它就会告诉你已经走了多远的距离。

我所做的 99% 的 JS 动画都使用以下公式:

function simple_easing(how_much_time_has_passed) {
    return (1 - Math.cos(how_much_time_has_passed * Math.PI)) / 2;
}

我不知道为什么它会起作用。我并没有试图理解其背后的数学原理。

但是上面的等式对动画的制作方式做出了很多假设。 how_much_time_has_passed 参数需要是 0 到 1 之间的小数；它还返回 0 到 1 之间的小数，这本身几乎没有用处(除非您要设置不透明度动画)。

当此函数返回 how_much 值时，您需要对其执行以下操作:

current_value = start_value + total_distance * how_much;

...这意味着您必须开始跟踪原始示例中没有的其他内容。

进一步阅读

Robert Penner's awesome chapter about tweening equations from his awesome book.

<小时/>

编辑:或者，您可以只使用 jQuery 插件。