하나의 레이어에 여러 개의 KineticJS 애니메이션을 포함 할 수 있습니까?

Question

내 KineticJS 애니메이션을 stop()하는 데 문제가 있습니다.

동일한 레이어에 3 개의 KineticJS 이미지 개체가 있고 각 KineticJS 이미지 개체에 KineticJS 애니메이션을 추가했습니다. 그러나 이미지 객체 중 하나만 애니메이션을 표시합니다. 또한 세 개의 모든 객체 (실제로 시각적으로 애니메이션을 적용하지 않는 객체 포함)의 애니메이션을 중지 (stop)하지 않으면 anim.stop()에 대한 응답으로 애니메이션이 중단되지 않습니다.

제 질문은 seprate 객체/이미지/모양에 여러 독립 애니메이션을 추가하고 각 애니메이션을 개별적으로 start()/stop() 할 수 있습니까? 또는 각 KineticJS 이미지 객체에 대해 개별 레이어를 만들어야합니까? 다음과 같이 (버전을 해킹) 간단히 말해서

, 내 코드는 다음과 같습니다

stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight}); 

layer = new Kinetic.Layer(); 

var kinObjArr = []; 

for (var i=0; i < 3; i++) { 
    kinObjArr[i] = new Kinetic.Image({image: myHTMLImage}); 

    kinObjArr[i].anim = new Kinetic.Animation({ 
     func: function(frame) { 
      kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI/500) + 100); 
     }, 
     node: layer 
    }); 

    kinObjArr[i].anim.start(); 

    kinObjArr[i].on('touchstart', function(){ 
     this.anim.stop(); // <----- Doesn't stop 
     layer.draw(); 
    }); 

} // for 

stage.add(layer); 

기본적으로 만 목록의 마지막 KineticJS 이미지가 애니메이션되고 그것은 단지 3 개 이미지가되었을 때 중지 할 수 있습니다 만진/클릭.

Answer 1

고전적인 폐쇄 문제. 익명 함수를 사용하여 범위를 유도하거나 모든 논리를 자체 함수로 분리해야합니다. 여기에 자바 스크립트 클로저에 대한 기사는 다음과 같습니다

How do JavaScript closures work?

KineticJS는 (물론 때까지 메모리가 부족) 애니메이션의 무제한 응답 에릭에 대한

Answer 2

감사를 지원합니다. 그 기사를 읽었을 때 내 머리가 엉망이되었지만 결국 나는 그것을 얻었습니다. 나는 두 번째 옵션을 선택하고 그것이 마치 마법처럼 작동합니다 :

(다시,이 내 실제 코드의 해킹 버전이 테스트하지 않은이 조각)

stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight}); 

layer = new Kinetic.Layer(); 

var kinObjArr = []; 

function myFunc(i) { 
    kinObjArr[i] = new Kinetic.Image({image: myHTMLImage}); 

    kinObjArr[i].anim = new Kinetic.Animation({ 
     func: function(frame) { 
      kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI/500) + 100); 
     }, 
     node: layer 
    }); 

    kinObjArr[i].anim.start(); 

    kinObjArr[i].on('touchstart', function(){ 
     this.anim.stop(); // <----- Stops now 
     layer.draw(); 
    }); 
} // function myFunc 


for (var i=0; i < 3; i++) { 
    myFunc(i); 
} // for 

stage.add(layer);