JavaScript-анимация с ослаблением

Question

Я пытаюсь создать модуль слайдера с JavaScript. Все работает, но анимация линейна и не чувствует себя гладкой или естественной. Я думал о подключении ослабляющего уравнения, но я не уверен, куда оно идет.

Вот функция анимации я позаимствовал from here:

function animate(elem, style, unit, from, to, time) { 
    if (!elem) return; 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1,(new Date().getTime()-start)/time); 

      elem.style[style] = (from+step*(to-from))+unit; 

      if (step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

И функция ослабления from here:

/** 
* @param {Number} t The current time 
* @param {Number} b The start value 
* @param {Number} c The change in value 
* @param {Number} d The duration time 
*/ 
function easeInCubic(t, b, c, d) { 
    t /= d; 
    return c*t*t*t + b; 
} 

Я попытался просто проездом в значениях у меня уже есть, как это:

elem.style[style] = easeInCubic(start, from, to, time) + unit; 

Но ясно, что это неправильно (я не amazi ng при математике, и я, по общему признанию, просто догадываюсь).

Как присоединиться к двум вместе?

Answer 1

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

function animate(elem, style, unit, from, to, time) { 
    if (!elem) return; 
    var start = new Date().getTime(), 
     timer = setInterval(function() { 
      var step = Math.min(1,(new Date().getTime()-start)/time); 
      elem.style[style] = easeInCubic(step*time, from,step*(to-from), time)+unit; 

      if (step == 1) clearInterval(timer); 
     },25); 
    elem.style[style] = from+unit; 
} 

Answer 2

t это текущее время, или более точно истекшее время. В вашем случае new Date().getTime() - start

c - разница между началом и концом, в вашем случае from - to.

 var elapsedTime = new Date().getTime() - start; 
     elem.style[style] = easeInCubic(elapsedTime, from, to - from, time) + unit; 
     if (elapsedTime >= time) clearInterval(timer);