jQuery 애니메이션을 앞뒤로 스크롤

Question

코치가 화면에 플레이어를 추가하고 (HTML5 캔버스를 사용하여 화살표를 그려서) 이동 방향을 설정 한 다음 '재생'을 누르는 풋살 (실내 축구) 코칭 애플리케이션을 만들고 있습니다. '을 눌러 모든 플레이어를 화면으로 이동시킵니다. 플레이어는 플레이어의 배경 이미지가있는 div로 구성됩니다.

애니메이션은 jquery .animate() 기능을 사용하여 수행되고 있습니다.

나는 플레이어를 변경합니다. div'sleft 및 top css 위치 속성.

나는이 할 수있는 방법에 대한 두 가지와 확신을하고 싶습니다 : 나는 jQuery를 슬라이더를 생성하고 애니메이션이 수행됨에 따라 incremently 이동하려는

1. . 애니메이션을 시작하기 전에 애니메이션의 전체 길이를 계산하여이 작업을 수행 할 것이라고 추측하고 있습니까?

2. jQuery 슬라이더를 앞뒤로 움직여서 애니메이터를 역전시키고 필요할 때 일시 정지합니다. 우리가 애니메이션을 위해 div를 움직이고 프레임 별 시퀀스 애니메이션을하지 않는다는 점을 고려하면 가능합니다.

Answer 1

에 최선을 다하고 같은 소리?

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which 
$(playerdiv).data("startTop",startposition.top); 
$(playerdiv).data("startLeft",startposition.left); 

나중에 등

left = $(playerdiv).data("startTop") 

사용하여 검색 할 수 있습니다

단계 옵션을 사용하여 항상 애니메이션에 콜백을 제공 할 수 있습니다. 이렇게하면 슬라이더를 적절하게 업데이트 할 수 있습니다.

$(playerdiv).animate({ 
    top : targetTop, 
    left : targetLeft, 
    step, function(){ magic happens here 
}) 

Answer 2

나는 이런 식으로 할 것 :

1. 사용자가 "재생"목적지로 현재 위치에서 div의 애니메이션을 시작 클릭하면

   . 당신은 쉽게 슬라이더의 위치에 따라 시간과 div의 위치에 남아 계산할 수 있습니다
   • startingDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition을;
   • startingDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
   • startingTime = totalDuration * sliderPosition;

   (또는 sliderPosition는 0과 1 사이의 일입니다, 같은) 사용자가 모든 div의에 .stop() 메서드를 호출, 슬라이더 다시 클릭하면

2. : 그들은 것 그 방법은 애니메이션을 멈 추면 정적으로 설정할 수 있습니다. div가 있어야하는 위치를 계산하고 정적으로 해당 지점으로 이동하십시오.

3. 사용자가 슬라이더를 떨어 뜨리고 "재생"이 여전히 활성화되어 있으면 슬라이더를 놓은 지점에서 애니메이션이 계속 앞으로 이동해야합니다.

그것은 좋은 프로젝트를 어떻게 시작 위치를 저장에 대해, 애니메이션이 시작하기 전에 :