アバターがスムーズに動かない

Question

左右の矢印キーでアバターを左右に動かすことができます。 しかし、矢印キーを押したときにgo-stop-go-stopのように動くので、スムーズに実行されません。それはRUを滑らかにするためにどのよう

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


     } 
    } 

： https://jsfiddle.net/zk45xgnd/2/

HTML：：

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

CSS：

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

jqueryの

はフィドルを見ます矢印キーを押したまま眠っていますか？ここ@adam

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


     } 
    }