GIF图片定位动画使用JavaScript

Question

我正在尝试使用我的代码 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 图片在左上角可见，但没有移动。

P.S。添加了一个 HTML/JS 片段，但它输出了一些错误，而在我看来这些错误并没有出现。

Answer 1

首先让我们修改克隆 gif 的方式 - 去掉这一行：

this.image = walk.cloneNode(false);

并插入：

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

这将创建一个新的空 HTML 图像元素。

现在指定它是 .src 属性你的 gif 的来源：

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

并将CSS位置属性设置为绝对:

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

最后使用以下方法将这个新图像元素添加到正文中：

document.body.appendChild(this.image);

如果您点击运行，您仍然看不到任何移动，因为还有一些小问题需要解决！

找到这一行：

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>

GIF图片定位动画使用JavaScript

GIF image position animation using JavaScript

html

javascript

animation

gif