GIF анимация положения изображения с использованием JavaScript - PullRequest
Новая
       11

GIF анимация положения изображения с использованием JavaScript

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

Я пытаюсь изменить положение изображения, используя JavaScript, используя мой код, но по какой-то причине это не работает.Может кто-нибудь объяснить причину. 

var walk, isWaveSpawned = true;
  var walkers = [];

function start()
{
  walk = document.getElementById("walk");
      
  draw();  //Animation function
}

function draw()
{
  if(isWaveSpawned) //Generate a wave of 5 "walkers"
  {
    isWaveSpawned = false;
    for(var i = 0; i < 5; i++
      walkers.push(new createWalker());
  }
      
  for(var o = 0; o < walkers.length; o++) //Add 1px to x position after each frame
  {
    walkers[o].x += walkers[o].speed;
    walkers[o].image.style.left = walkers[o].x;
    walkers[o].image.style.top = walkers[o].y;
  }
  requestAnimationFrame(draw);
}

function createWalker()
{
    this.x = 0;
    this.y = 100;
    this.speed = 1;
    this.image = walk.cloneNode(false);  //Possible cause of issue
}
<!DOCTYPE html>
<html>
  <body onload="start()">
    <img id="walk" src="https://i.imgur.com/ArYIIjU.gif">
	</body>
</html>

Мое изображение GIF видно в левом верхнем углу, но не перемещается.

PS Добавлен фрагмент HTML / JS, но выводится несколькоошибки, пока в моем конце эти ошибки не видны.

1 Ответ

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

Сначала давайте изменим способ клонирования GIF - избавьтесь от этой строки: 

this.image = walk.cloneNode(false);

и вставьте это: 

this.image = document.createElement("img");

Это создаст новый пустой HTMLэлемент изображения.

Теперь присвойте его .src свойству источник вашего gif: 

this.image.src=document.getElementById("walk").src;

и установите свойство позиции CSS в absolute : 

this.image.style="position:absolute;";

наконец добавьте этот новый элемент изображения в тело, используя: 

document.body.appendChild(this.image);

Если вы нажмете Run, вы все равно не увидите никаких движений, потому что есть еще небольшое исправление, которое нужно сделать!

Найдите эту строку: 

walkers[o].image.style.left = walkers[o].x;

и измените ее на: 

walkers[o].image.style.left = walkers[o].x + "px";


var walk, isWaveSpawned = true;
var walkers = [];

function start() {
  walk = document.getElementById("walk");
  draw(); //Animation function
}

function draw() {
  if (isWaveSpawned) //Generate a wave of 5 "walkers"
  {
    isWaveSpawned = false;
    for (var i = 0; i < 5; i++)
      walkers.push(new createWalker());
  }

  for (var o = 0; o < walkers.length; o++) //Add 1px to x position after each frame
  {
    walkers[o].x += walkers[o].speed;
    walkers[o].image.style.left = walkers[o].x + "px";
    walkers[o].image.style.top = walkers[o].y + "px";
  }
  requestAnimationFrame(draw);
}

function createWalker() {
  this.x = 0;
  this.y = 100;
  this.speed = 1;
  this.image = document.createElement("img");
  this.image.src = document.getElementById("walk").src;
  this.image.style = "position:absolute;";
  document.body.appendChild(this.image);
}

start();
<body>
  <img id="walk" src="https://i.imgur.com/ArYIIjU.gif">
</body>
...