KineticJSアニメーションをstop()にするのに問題があります。
同じレイヤーに3つのKineticJS画像オブジェクトがあり、それらの各KineticJS画像オブジェクトにKineticJSアニメーションを追加しました。ただし、画像オブジェクトの1つだけがアニメーションを表示します。また、3つのオブジェクトすべて(実際には視覚的にアニメーション化されていないオブジェクトを含む)のアニメーションをstop()しない限り、anim.stop()に応答してアニメーション化を停止しません。
私の質問は、個別のオブジェクト/画像/形状に複数の独立したアニメーションを1つのレイヤーに追加しても、各アニメーションを個別に開始()/停止()できるかどうかです。または、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つの画像すべてがタッチ/クリックされた場合にのみ停止できます。