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插件。

Answer 2

也许它会帮助你：

var Timer = {
  threshold: 5000,
  wait: 1000,

  Start: function () {
    var _this = this;
    setTimeout(function () { _this.Swap(); }, _this.wait);
  },

  Swap: function () {
    this.wait += 1000;
    if (this.threshold > this.wait) {
      alert('next');
      this.Start();
    } else {
      alert('stop');
    }
  }
};

Answer 3

使用jQuery easing plugin并在一个包含中为您完成了所有繁重的工作;）

Ease-out使用setTimeout

3 个答案:

进一步阅读