使用 JavaScript 的 GIF 图像位置动画答案

【问题标题】：GIF image position animation using JavaScript使用 JavaScript 的 GIF 图像位置动画
【发布时间】：2019-07-15 07:41:57
【问题描述】：

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

附：添加了一个 HTML/JS sn-p，但它输出了一些错误，而我最终没有看到这些错误。

【问题讨论】：

您能否编辑您的问题并使用 stackoverflow 的 HTML/CSS/Javascript Snippet 而不是粘贴文件内容，以便我们轻松尝试和重现您的代码。

标签： javascript html animation gif

【解决方案1】：

首先让我们修改克隆 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);

如果你点击跑步，你仍然看不到任何动作，因为还有一些小问题要做！

找到这一行：

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>

【讨论】：