0

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つの画像すべてがタッチ/クリックされた場合にのみ停止できます。

4

2 に答える 2

5

古典的な閉鎖問題。匿名関数を使用してスコープを誘導するか、すべてのロジックを独自の関数に分割する必要があります。Javascript クロージャに関する記事は次のとおりです。

JavaScript クロージャーはどのように機能しますか?

KineticJS は、無制限の数のアニメーションをサポートします (もちろん、メモリがなくなるまで)

于 2012-10-03T02:14:58.217 に答える
0

エリックさん、返信ありがとうございます。その記事を読んで頭が曲がってしまいましたが、最終的には理解できたと思います。私はあなたの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);
于 2012-10-03T15:43:39.230 に答える