애니메이션 루프의 기본 구문은 무엇입니까?

Question

jQuery는 예를 들어 일종의 애니메이션을 처리 할 수 ​​있다는 것을 알고 있습니다. 또한 애니메이션의 핵심에서 애니메이션을 수행하는 일종의 루프가 필요하다는 것을 알고 있습니다. 그러한 루프의 예는 무엇입니까?

완전한 대답은 이상적으로 다음 질문에 대답해야합니다

• 한 번에 특정 객체의 하나의 속성에 애니메이션을 적용 할 수있는 효과적인 애니메이션 재귀에 대한 기본 구문은 무엇입니까? 이 함수는 객체의 대상 객체와 속성을 변경할 수 있어야합니다.
• 어떤 인수/매개 변수를 취해야합니까?
• 루프를 반복하는 좋은 범위는 무엇입니까? 밀리 세컨드? (이 함수에 매개 변수/인수해야 하는가?)

기억 :

• 대답은 반드시 특정 언어가 아니라 특정 언어로 작성하는 경우, 어느 하나를 지정하십시오.
• 오류 처리는 장점입니다. {중간에 멈추는 것과 같이 이상한 일을하는 애니메이션보다 더 짜증나는 일은 없습니다.}

감사합니다.

Answer 1

(일반적으로 jQuery의 경우) 이는 루프에서 수행되는 것이 아니라 일련의 콜백에서 수행됩니다.

pseudojavascript :

function startAnimation(element, endPosition, duration) { 
    var startPosition = element.position; 
    var startTime = getCurrentTime(); 
    function animate() { 
     var timeElapsed = getCurrentTime() - startTime; 
     if (timeElapsed > duration) { 
      element.position = endPosition; 
      stopTimer(); 
     } else { 
      // interpolate based on time 
      element.position = startPosition + 
       (endPosition - startPosition) * timeElapsed/duration; 
     } 
    } 
    startRepeatingTimerWithCallbackAndInterval(animate, 1.0/30.0); 
} 

그것은 폐쇄하는 대신 데이터를 시작 저장하는 객체를 사용하는 것도 가능합니다.

이것은 질문의 모든 부분에 완전히 대답하지는 않지만 출발점입니다.