Bom, eu basicamente criei uma classe pra filtrar e ler uma spritesheet de estilo atlas, ela funciona, porém ao clicar para mudar a orientação da sprite ou até mesmo recarregar a mesma sprite, o sistema acelera a velocidade a cada click.
Exemplo online de como está: https://spriteframework.000webhostapp.com
Essa é a função responsável por atualizar as frames e também e ela que está dando trabalho.
if (!intervalId) {
var intervalId = setInterval(function () {
$('.sprite-container > span:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('.sprite-container');
}, fps);
} else {
clearInterval(intervalId);
intervalId = null;
}
Segue o codigo completo a função para gerar uma animação do sprite
function GetSprite(data = false, action = 'idle', fps = false, loop = true) {
$('.sprite-container').empty();
//Load Json Data
$.getJSON(data, function (data) {
//Main vars
var fps = 60;
//first frame fix
var first = 0;
var i = 0;
//Create frame element
$.each(data.frames, function (i) {
//Limit to create only by action type
if (data.frames[i].action == action) {
actionType = "." + action;
$('<span/>', {
class: data.frames[i].action + " sprite-template",
style: 'background-image:url("' + data.file +
'");background-position: -' + data.frames[i].posX + 'px -' + data
.frames[i].posY + 'px',
}).appendTo('.sprite-container');
}
});
$(".sprite-container > span:gt(0)").hide();
if (!intervalId) {
var intervalId = setInterval(function () {
$('.sprite-container > span:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('.sprite-container');
}, fps);
} else {
clearInterval(intervalId);
intervalId = null;
}
});
};
fps
que tem um valor boolean no início, depois declara outra com o mesmo nome com valor numérico, deveria usar nomes diferentes