как перемещать анимацию по экрану js - PullRequest
Новая
       19

как перемещать анимацию по экрану js

0 голосов
/ 27 февраля 2019

Я создал анимацию pac-man, открывающего и закрывающего рот, но я также хотел бы, чтобы он двигался по экрану.Я поиграл с setTimeout (), и я могу получить одно изображение для перемещения по экрану, но не фактическую анимацию.Как я могу сделать это, используя чистый JS.

это HTML у меня есть 

<body>
  <div id="animation">
    <img id="pacManImg" src="pacMan1.png" width="50" height="50" />
    <img id="pacManImg" src="pacMan2.jpg" width="50" height="50" />
</div>
<button onclick="startAnimation()"> Start</button>
</body>

Я использую это для моих JS 

function startAnimation() { 
  var frames = document.getElementById("animation").children;
  var frameCount = frames.length;
  var i = 0;
  setInterval(function () { 
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
}, 300);
}

1 Ответ

0 голосов
/ 27 февраля 2019

Просто используйте i для увеличения свойства left: 

setInterval(function() {
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
    document.getElementById("animation").style.left = i + "px";
});

Обратите внимание, что для этого требуется position: absolute; в вашем CSS.

...