Jquery 每次单击都会创建新的精灵动画

我试图在我的页面上有一个使用Sprity脚本制作动画的角色。 我正在使用的精灵表总共包含92帧。 我想动画是可点击的

当第一次单击它时，我希望它播放到第70帧并停止。 然后，下次单击它时，我希望动画从第70帧播放到第92帧并停止

我应该如何编写代码

到目前为止，我能够让动画播放到第70帧并停止。即使是一个初学者，这也是相当容易的

以下是我目前掌握的情况：

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

});

使用此代码，当您单击角色时，它将播放第1-70帧并停止。那很好。但是，下次单击它时，它将从第70帧开始拾取，并继续执行另70帧。如何更改此设置，使动画在第二次单击时仅播放第70帧到第92帧

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

---

如果你能帮我做这件事，我将不胜感激！谢谢

我很难找到一个92图像PNG文件进行测试，所以我不得不凑合着用一个较短的。以下是一个工作示例：

示例中的代码如下所示：

(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（play>=total）

上使用

return

的额外点击。您可以在此时重置播放的

，

，或者执行任何您想执行的操作。如果这不起作用，您是否介意发布您的PNG文件或类似的长文件，以便在JSFIDLE中使用

使用阵列配置帧数 如果要在每次单击时播放配置数量的帧，可以执行以下操作：

我们可以调整此代码以匹配您的标记，如下所示：

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

​

---

​

我很难找到一个92图像PNG文件进行测试，所以我不得不凑合着用一个较短的。以下是一个工作示例：

示例中的代码如下所示：

(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（play>=total）

上使用

return

的额外点击。您可以在此时重置播放的

，

，或者执行任何您想执行的操作。如果这不起作用，您是否介意发布您的PNG文件或类似的长文件，以便在JSFIDLE中使用

使用阵列配置帧数 如果要在每次单击时播放配置数量的帧，可以执行以下操作：

我们可以调整此代码以匹配您的标记，如下所示：

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

​

---

​

谢谢！是的，它确实奏效了。对不起，我是新手，但我得问另一个问题。我需要写什么（以及如何将其添加到现有代码中）才能使对象再次可点击？而且，更具体地说，我希望它能够在每次新的点击上做更多的动画，如果可能的话。当它被第三次点击时（第一次播放72帧，第二次播放休息），你希望发生什么？你想重复72，rest，72，rest，72 rest等的模式吗？我希望能够向我的精灵工作表添加更多的帧，以便下次单击将执行精灵工作表的下一帧。例如。。。第一次点击=第1-70帧，第二次点击=第71-92帧，第三次点击=第93-103帧，等等。好的，这是一个很好的控制程度，但我们可以做到。我们需要有一个播放多少帧的数组，对于每次单击，我们将转到数组中的下一个值并播放那么多帧。如果总是播放50帧，我们就不需要阵列了。稍后我将链接到另一个JSFIDLE。下面是一个使用数组来配置每次单击要播放多少帧的示例：谢谢！是的，它确实奏效了。对不起，我是新手，但我得问另一个问题。我需要写什么（以及如何将其添加到现有代码中）才能使对象再次可点击？而且，更具体地说，我希望它能够在每次新的点击上做更多的动画，如果可能的话。当它被第三次点击时（第一次播放72帧，第二次播放休息），你希望发生什么？你想重复72，rest，72，rest，72 rest等的模式吗？我希望能够向我的精灵工作表添加更多的帧，以便下次单击将执行精灵工作表的下一帧。例如。。。第一次点击=第1-70帧，第二次点击=第71-92帧，第三次点击=第93-103帧，等等。好的，这是一个很好的控制程度，但我们可以做到。我们需要有一个播放多少帧的数组，对于每次单击，我们将转到数组中的下一个值并播放那么多帧。如果总是播放50帧，我们就不需要阵列了。我将在一分钟内链接到另一个JSFIDLE。下面是一个使用数组配置每次单击播放多少帧的示例：