是否有可能在單個圖層上有多個KineticJS動畫？

Question

我有一個問題讓我的KineticJS動畫停止（）。

我在同一圖層上有三個KineticJS圖像對象，並且我爲每個這些KineticJS圖像對象添加了一個KineticJS動畫。但是隻有其中一個圖像對象顯示任何動畫。除非我停止（）所有三個對象的動畫（包括實際上沒有視覺動畫的對象），否則它也不會停止對anim.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

經典關閉問題。你需要使用匿名函數來引發範圍，或者將所有的邏輯分解爲它自己的函數。下面是關於JavaScript關閉的文章：

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);