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

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

请注意，一旦我们达到总帧数，我们就会忽略在if (played >= total) 上使用return 的额外点击。你可以在那个时候重置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});
    });
})();

​

​