Простота использования 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;

... Это означает, что вам придется начинать отслеживать другие вещи, которых не было в вашем первоначальном примере.

Дальнейшее чтение

Удивительная глава Роберта Пеннера о анимации уравнений из его удивительной книги.

---

РЕДАКТИРОВАТЬ: Или, вы можете просто использовать плагин jQuery.

Answer 2

Используйте плагин jQuery easing , и все тяжелые работы были сделаны для вас за одно включение;)

Answer 3

Может быть, вам поможет:

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');
    }
  }
};