使用数组配置帧数

Question

我正在尝试在我的页面上使用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帧。如何更改此设置以便动画仅在第二次单击时播放第70帧到第92帧？

PS：我希望最终让角色为每次点击执行不同的帧序列。

如果你能帮助我，我将非常感激！谢谢！

Answer 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或执行您喜欢的任何其他操作。如果这不起作用，你介意发布你的PNG文件或类似的长文件，以便在jsfiddle中使用。

使用数组配置帧数

如果您想在每次点击时播放配置的帧数，可以执行以下操作：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});
    });
})();

每次点击都会有新的精灵动画

1 个答案:

使用数组配置帧数