1

Spritelyスクリプトを使用してアニメーション化するキャラクターをページに配置しようとしています。私が使用しているスプライトシートには、合計92フレームが含まれています。アニメーションをクリックできるようにしたいと思います。

初めてクリックするときは、フレーム70まで再生して停止させたいです。次にクリックしたときに、アニメーションをフレーム70から92まで再生して停止したいと思います。

コードはどのように書くべきですか？

これまでのところ、アニメーションをフレーム70まで再生して停止することができます。初心者のWeb開発者でさえ、これはかなり簡単でした。

これが私がこれまでに持っているものです：

$('#stacheguy2').click(function() {
    $(this)
    .sprite({fps: 30, no_of_frames: 92, play_frames: 70,})

});

このコードでは、キャラクターをクリックすると、フレーム1-70が再生されて停止します。それは良い。ただし、次にクリックすると、フレーム70からピックアップされ、さらに70フレーム続きます。アニメーションが2回目のクリックでフレーム70から92のみを再生するように、これを変更するにはどうすればよいですか？

PS：最終的には、クリックごとに異なるフレームシーケンスをキャラクターに実行させたいと思います。

あなたがこれで私を助けることができれば私はとても感謝するでしょう！ありがとう！

4

1 に答える 1

1

テスト用の92画像のPNGファイルを見つけるのに苦労したので、短いものでやらなければなりませんでした。これが実際の例です：http：//jsfiddle.net/Yhrbb/

例のコードは次のとおりです。

(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#fly').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

私たちはあなたのためにそれを適応させることができます：

​(function() {
    var total = 92;
    var play_on_click = 72;
    var played = 0;

    $('#stacheguy2').click(function() {
        if (played >= total) {
            return;
        }

        var current_play;

        if (play_on_click > (total - played)) {
            current_play = total - played;
        }
        else {
            current_play = play_on_click;
        }

        played += current_play;
        $(this).sprite({fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

合計フレームに達すると、returnオンでの追加のクリックを単に無視していることに注意してくださいif (played >= total)。playedその時点でリセットするか、他に好きなことをすることができます。これが機能しない場合は、jsfiddleで使用するためにPNGファイルまたは同様に長いファイルを投稿していただけませんか。

配列を使用したフレーム数の構成

クリックごとに構成された数のフレームを再生したい場合は、これを行うことができます：http: //jsfiddle.net/dNYks/

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#fly').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $('#bird').sprite({fps: 12, no_of_frames: 3, play_frames: current_play});
    });
})();

このコードは、次のようにマークアップに一致するように調整できます。

(function() {
    var play_on_click = [32, 21, 10, 20];
    var play_index = 0;

    $('#stacheguy2').click(function() {
        var current_play = play_on_click[play_index];

        play_index++;
        if (play_index > play_on_click.length-1) {
            play_index = 0;
        }

        $(this).sprite(fps: 30, no_of_frames: 92, play_frames: current_play});
    });
})();

</ p>

</ p>

于 2012-12-05T04:14:47.500 に答える