javascript - 头像移动不流畅

Question

使用左右箭头键，我应该能够左右移动头像。 但是，它运行起来并不流畅，因为它的移动方式如下:按住箭头键时走-停-走-停。

参见 fiddle : https://jsfiddle.net/zk45xgnd/2/

html:

<div id='avtr'></div>

CSS:

#avtr {
  position:absolute;
  height:50px;
  width:50px;
  background-color:#f00;
}

j查询:

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=40'}, 150);
                setTimeout(function() {allowedToWalkTime = true;},150);
            }


        }
    }

如何让它在按住方向键时流畅运行？

@adam A 的解决方案 https://jsfiddle.net/zk45xgnd/3/

Answer 1

这是更新后的代码，具有较低的值和移动之间的等待时间，这使它的动画更加流畅。但是，我建议查看 Phaser 的 GSAP 动画库以获得一些非常高级的东西。

var allowedToWalk = false, allowedToWalkTime = true;
var percentage = 1;
var maxWidth = 1000;
    $(window).keydown(function(e) {

        if(e.which == 39) {
            //move to right
            allowedToWalk = true;
            avatarMoveRight();

        }
        if(e.which == 37) {
            //move to left
            allowedToWalk = true;
            avatarMoveLeft();

        }
    }).keyup(function() {
        allowedToWalk = false;
    });

    function avatarMoveRight() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 40) < (percentage * maxWidth)) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '+=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }

        }
    }

    function avatarMoveLeft() {
        if(allowedToWalk != false && allowedToWalkTime != false) {
            var pos = $("#avtr").css('left');
            pos = pos.replace('px', '');
            pos = pos - 0;
            if((pos - 4) > 0) {
                allowedToWalkTime = false;
                $("#avtr").animate({left: '-=5'}, 5);
                setTimeout(function() {allowedToWalkTime = true;},5);
            }


        }
    }