Как использовать этот метод easeOutBounce?

Question

вот метод для easeOutBounce

    easeOutBounce: function (t, b, c, d) {  
  if ((t/=d) < (1/2.75)) {  
   return c*(7.5625*t*t) + b;  
  } else if (t < (2/2.75)) {  
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;  
  } else if (t < (2.5/2.75)) {  
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;  
  } else {  
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;  
  }  
 }

Я хочу создать свой собственный метод, не могу использовать jquery или другую библиотеку.

Где t: время, b: начальная позиция, c: общее изменение позиции, d: продолжительность.
Может ли кто-нибудь объяснить, как я могу использовать этот метод для значения easeOutBounce? Я имею в виду, что я передам в качестве параметра и как я буду использовать возвращаемое значение?

Answer 1

Используя jQuery, вы можете просто вызвать это событие в любой анимации. Убедитесь, что вы включили соответствующие файлы JS и поставили что-то вроде:

$('#your-div').click(function() {
  $(this).animate({height: "100px"}, 500, 'easeOutBounce');
});

Answer 2

Очень старый вопрос, но для любого, кто наткнулся на него (как я только что сделал), и поскольку он требует не использовать библиотеку, я чувствую, что ему нужен другой ответ.

Я сейчас занимаюсь теми же проблемами, и я не знаю о javascript, но это также может быть применимо. Что я делаю, это:

1. Выполните этот метод несколько раз с некоторым интервалом времени, который вы считаете удобным. Чем ниже значение, тем более плавная анимация, но тем больше нагрузка на систему.

2. Используйте следующие параметры:
   b = 0
   c = 1
   d = продолжительность анимации в некотором временном блоке
   t = время, прошедшее с начала в том же ту

3. Возвращаемым значением будет число от 1 до 0. 0 означает, что оно находится в начальной позиции, а 1 - в конце. Отсюда все, что вам нужно сделать, это умножить его на общее расстояние в каждой координате и добавить это значение к каждому текущему значению координаты, чтобы поместить объект в правильное положение во время анимации.

Дополнительная информация:

Эта ссылка была очень полезна для меня, для понимания этих функций.