JavaScript 애니메이션 (여유 공간 사용)

Question

JavaScript로 슬라이더 모듈을 빌드하려고합니다. 모든 것이 작동하지만 애니메이션은 선형이며 부드럽거나 자연스럽지 않습니다. 나는 이징 방정식을 생각해 봤지만 어디로 가고 있는지 확신하지 못합니다.

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; 

다음

내가 from here을 빌려 애니메이션 기능입니다

하지만 분명히, 그건 틀렸어. (나는 아마 지 수학에, 나는 추측하고있다.)

두 항목을 어떻게 함께 연결합니까?

Answer 1

당신의 접근 방식은 괜찮습니다. 방금 잘못된 매개 변수를 사용했습니다. 이 말하듯 는, t는 현재 시간 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);