d3/Javascript 애니메이션이 실행되고 있지 않을 때

Question

다음 코드는 경로를 따라 객체 ("태그")에 애니메이션을 적용하는 데 필요한 좌표 (x, y, t)입니다. 여기서 t는 시간 이 좌표와 다음 좌표 사이의 거리 (ms) - 개체의 가속/감속을 설명합니다.이 경로는 사용자의 마우스 동작에서 생성되며 높은 정밀도가 바람직합니다. 프로젝트는 d3.js를 사용하여 SVG를 애니메이션으로 만듭니다.

function Animation(tag,path) { 
    this.tag = tag; 
    this.path = path; 
} 

Animation.prototype = { 
    start : function() { 
     console.log('Animation created'); 
     var i = 0; 
     var nextTime = this.path[0].t; 
     var thisClass = this; 

     setTimeout(function(){}, nextTime); 

     console.log('Beginning animation'); 

     function step() { 
      setTimeout(function(){ 
       if(i == thisClass.path.length -1) { 
        var now = new Date(); 
        console.log('Animation for '+ thisClass.tag.attr('id') + ' played at ' + (now - globalTimer) + 'ms.'); 
        return; 
       } 
       if(i === 0) { 
        var now = new Date(); 
        console.log('Animation for '+ thisClass.tag.attr('id') + ' started at ' + (now - globalTimer) + 'ms.'); 
       } 
       thisClass.tag 
        .attr('cx', thisClass.path[i].x) 
        .attr('cy', thisClass.path[i].y); 
       i++; 
       requestAnimationFrame(step); 
      }, thisClass.path.t); 
     } 

     requestAnimationFrame(step); 

    } 
}; 

또 다른 클래스는 각 애니메이션이 재생되어야 할 때를 계획합니다. 예를 들어, 30 초 동안 3 건의 애니메이션을 재생해야합니다 (03, 09, : 25). 애니메이션이 재생 될 필요가되면, 스케줄러를 호출

new Animation(Tag, Path).start(); 

문제 : 스케줄러가 제 시간에 제대로 각 애니메이션을 호출 있지만, 기능 step()의 어떤 인스턴스가 제 시간에 실행되지 않습니다 - 그들은 모두 기록 된 기간의 끝에서 즉시 일어나는 것처럼 보입니다. 하나는 내 로그를 희망하면서 그래서 다음과 같이 보일 수 있습니다 :

애니메이션
이
애니메이션
애니메이션
애니메이션
을했다
부터 애니메이션을 만들어 연주 애니메이션을 시작 만들어 ...

... 대신 다음과 같이 보입니다.

01 자세한 내용은 http://puu.sh/4Ucw9.png : 23,516,

는 애니메이션부터 애니메이션
애니메이션은 애니메이션

(편집 플레이
(2) 애니메이션을 시작
을 만들어
만들었습니다. "애니메이션 푸시 됨"은 new Animation(...)의 직후에 나오므로 이론적으로 애니메이션이 완성 된 후에 나타납니다. 보시다시피 세 개의 태그 (c0, c1, c2)는 각각 다른 ms 기호로 호출되지만, 세 가지 모두의 애니메이션은 7019ms에서 시작되었습니다.

애니메이션은 호출 할 때 재생해야합니다. 기간의 끝. 그들은 대기열에 쌓여 있고 한꺼번에 모든 것을 집행하는 것 같지만, 이해할 때까지는 그렇게하지 말라고 말하지 않았습니다. 나는 어쨌든 requestAnimationFrame이 열쇠라고 생각하지만, 어제 그것을 사용하기 시작 했으므로 나는 아직도 그것이하는 것과 사용하는 방법을 100 % 확신하지 못하고있다. 아무도 무슨 일이 일어나는지 알아?

Answer 1

문제가 해결되었습니다. 분명히 문제는 d3과 관련이 있습니다. 타이머를 사용했기 때문에 d3의 타이머 대기열이 아니기 때문에 d3 명령을 실행하여 d3 특정 타이머가 시간 확인 기능을 작동시킬 때까지 실행되지 않았습니다.

두 경우 모두, 시계가 다음 예정된 애니메이션의 시작 시간에 도달 할 때까지 "false"를 반환합니다.이 시점에서 스케줄러는 적절한 Animation() 개체를 만들고 "true"를 반환했습니다.

이전 코드 (D3 요소를 애니메이션하지 않았다) :

while(!schedule());

새로운 코드 (시간에 D3 요소 애니메이션) :

d3.timer(schedule);

이상한, 나는 짐작 못했네을 그것은 d3이었습니다. 그러나 당신은 그것을 가지고 있습니다.