Ease-out使用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)关于从他那本令人敬畏的书中补充方程式的精彩篇章.

编辑:或者,您可以使用jQuery插件.