如何使用Javascript使css偏移更平滑？

Question

我有一个使用位置属性和javascript的播放器控制器，但它有点活泼。 我该怎么办？

我尝试制作一个无限循环然后添加一个时间来减慢它到客户端的计算机帧，但它只输出相同的结果，snappy。 另外，我在Atom中写了这个，我在Google Chrome Web浏览器上编译了它。

使用Javascript

var player = document.getElementById('Player');
var ctx = player.getContext("2d");
var playerXPos = 0;
var playerYPos = 0;
var playerSpeed = 5;
ctx.fillStyle = "Red";
ctx.fillRect(0,0,50,50);

function animate(key) {
  if (key.keyCode == 39) { //Right Arrow
    playerXPos += playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 37) { //Left Arrow
    playerXPos -= playerSpeed;
    player.style.left = playerXPos + "px";
  }
  if (key.keyCode == 38) { //Up Arrow
    playerYPos -= playerSpeed;
    player.style.top = playerYPos + "px";
  }
  if (key.keyCode == 40) { //Down Arrow
    playerYPos += playerSpeed;
    player.style.top = playerYPos + "px";
  }
  else {
    return false;
  }
}

document.onkeydown = animate;

HTML部分 （lol html不是编程语言，但无论如何）

<!DOCTYPE html>
<html>
<head>
  <title>Player Test</title>
  <style>
    #Player {
      position: relative;
    }
  </style>
<body>
  <canvas id="Player"></canvas>
  <script src="App/playerController.js" type="text/javascript"></script>
</body>
</html>

我希望它顺利。 我想我应该使用线性代数，但我不是在javascript方面的进步。 我其实是初学者。

Answer 1

您可以使用CSS transition属性来获得更平滑的效果。 您需要在CSS中设置元素的初始顶部和左侧位置，因为这些是您使用JS更改的属性。 我已将动画设置为持续0.5秒，但可以根据您的喜好将其调整为更快或更慢：

 var player = document.getElementById('Player'); var ctx = player.getContext("2d"); var playerXPos = 0; var playerYPos = 0; var playerSpeed = 5; ctx.fillStyle = "Red"; ctx.fillRect(0, 0, 50, 50); function animate(key) { if (key.keyCode == 39) { //Right Arrow playerXPos += playerSpeed; player.style.left = playerXPos + "px"; } if (key.keyCode == 37) { //Left Arrow playerXPos -= playerSpeed; player.style.left = playerXPos + "px"; } if (key.keyCode == 38) { //Up Arrow playerYPos -= playerSpeed; player.style.top = playerYPos + "px"; } if (key.keyCode == 40) { //Down Arrow playerYPos += playerSpeed; player.style.top = playerYPos + "px"; } else { return false; } } document.onkeydown = animate;

 #Player { position: relative; left: 0; top: 0; -webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */ transition: all 0.5s; }

 <canvas id="Player"></canvas>

Answer 2

你可以试试这个：

var player = document.getElementById('Player');
var ctx = player.getContext("2d");
var playerXPos = 0;
var playerYPos = 0;
var playerXSpeed = 0;
var playerYSpeed = 0;
ctx.fillStyle = "Red";
ctx.fillRect(0,0,50,50);

setInterval(function(){
    playerXPos += playerXSpeed;
    player.style.left = playerXPos + "px";
    playerYPos += playerYSpeed;
    player.style.top = playerYPos + "px";
},5)

function animate(event) {
    let x = event.which || event.keyCode
    switch (x) {
        case 39://Right Arrow
        playerXSpeed = 1
            break
        case 37://Left Arrow
        playerXSpeed = -1
            break
        case 38://Up Arrow
        playerYSpeed = -1;
            break
        case 40://Down Arrow
        playerYSpeed = 1;
            break
    }
}

document.onkeydown = animate;
document.onkeyup = function(){
    let x = event.which || event.keyCode
    switch (x) {
        case 39://Right Arrow
        case 37://Left Arrow
            playerXSpeed = 0
            break
        case 38://Up Arrow
        case 40://Down Arrow
            playerYSpeed = 0;
            break
    }
}

如何使用Javascript使css偏移更平滑？

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-04-09 01:50:29

解决方案2
0 2019-04-09 04:28:40

如何使用Javascript使css偏移更平滑？

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-04-09 01:50:29

解决方案2 0 2019-04-09 04:28:40

解决方案1
0 已采纳 2019-04-09 01:50:29

解决方案2
0 2019-04-09 04:28:40