0

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;
            }
        });
    };
1
  • você tem uma varíavel fps que tem um valor boolean no início, depois declara outra com o mesmo nome com valor numérico, deveria usar nomes diferentes Commented 24/01/2020 às 9:27

1 Resposta 1

2

O problema é que a cada clique num dos botões estão sendo criados várias instâncias do setInterval e nunca irá acessar o else onde o mesmo é cancelado, porque você está declarando o intervalo dentro do if e ele vai ser sempre false.

Uma solução é declarar a variável que receberá o intervalo fora da função:

var intervalId;
function GetSprite(data = false, action = 'idle', fps = false, loop = true) {
...

E retirar o var ao adicionar o intervalo à variável lá no if:

if (!intervalId) {
   intervalId = setInterval(function () {
   ...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .