我需要CSS和JS的精灵动画帮助

Question

我做了一个简单的项目，允许 4 图像精灵向一个方向移动，但我想知道如何做到这一点，以便每当不按下 D 键（移动角色的键）时，AnimationIndex与0相同，给人感觉角色已经停止了。

        $(document).ready(function () {
            var V = 40;
            var boneco = $('.boneco');
            var animacoes = ['direita', 'direita2', 'direita3', 'direita4']; // 4 pois o sprite de andar para a direita contém apenas 4 imagens
            var animacaoIndex = 1;
            var teclaDisponivel = true;

            function moverBonecoDireita() {
                var andou = parseInt(boneco.css('margin-left')) || 0; // lembrar: tudo que vem do css vem como string, usar parseInt para converter
                var larguraTela = $(window).width(); // tam tela
                var larguraBoneco = boneco.width(); // tam boneco

                if (andou + V + larguraBoneco <= larguraTela) {
                    boneco.removeClass(animacoes[animacaoIndex]);
                    animacaoIndex = (animacaoIndex + 1) % animacoes.length;
                    boneco.addClass(animacoes[animacaoIndex]);
                    boneco.css('margin-left', (andou + V) + 'px');
                }
            }

            $(document).on('keypress', function (evento) {
                var tecla = evento.keyCode;
                if (tecla == 100 && teclaDisponivel) { // tecla 'd'
                    teclaDisponivel = false;
                    moverBonecoDireita();
                    setTimeout(function () {
                        teclaDisponivel = true;
                    }, 110);
                } else if (tecla == 97) { // tecla 'a'
                    boneco.removeClass(animacoes.join(' '));
                    boneco.css('margin-left', '0px');
                    animacaoIndex = 1;
                }
            });
        });

我尝试创建一个命令块，以便当按下 D 键时，animationindex 将等于 0，但我失败了

Answer 1

请看下面的代码片段。尝试一次。

$(document).ready(function () {
    var V = 40;
    var boneco = $('.boneco');
    var animacoes = ['direita', 'direita2', 'direita3', 'direita4']; 
    var animacaoIndex = 0; 
    var teclaDisponivel = true;

    function moverBonecoDireita() {
        var andou = parseInt(boneco.css('margin-left')) || 0; 
        var larguraTela = $(window).width(); 
        var larguraBoneco = boneco.width(); 

        if (andou + V + larguraBoneco <= larguraTela) {
            boneco.removeClass(animacoes[animacaoIndex]);
            animacaoIndex = (animacaoIndex + 1) % animacoes.length;
            boneco.addClass(animacoes[animacaoIndex]);
            boneco.css('margin-left', (andou + V) + 'px');
        }
    }

    $(document).on('keypress', function (evento) {
        var tecla = evento.keyCode;
        if (tecla == 100 && teclaDisponivel) { // 'D' key
            teclaDisponivel = false;
            moverBonecoDireita();
            setTimeout(function () {
                teclaDisponivel = true;
            }, 110);
        } else if (tecla == 97) {
            boneco.removeClass(animacoes.join(' '));
            boneco.css('margin-left', '0px');
            animacaoIndex = 0;
        }
    });

    $(document).on('keyup', function (evento) {
        var tecla = evento.keyCode;
        if (tecla == 100) { 
            boneco.removeClass(animacoes.join(' '));
            animacaoIndex = 0;
            boneco.addClass(animacoes[animacaoIndex]);
        }
    });
});

animacaoIndex = 0;初始化：animacaoIndex 从 0 开始，表示动画的第一帧。

这将为您提供所需的效果，即在未按下“D”键时精灵动画重置为第一帧。

如有任何其他疑问，请告诉我。