GIF image position animation using JavaScript
Question
I'm trying to change image position using JavaScript using my code but for some reason it doesn't work. Can someone explain the reason.
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>
My GIF image is visible in top left corner but doesn't move.
PS Added a HTML/JS snippet but it outputs some errors while in my end these errors are not seen.
1 answers
solution1
0 ACCPTED 2019-02-21 12:33:47
First let's modify the way you're cloning the gif - get rid of this line:
this.image = walk.cloneNode(false);
and insert this:
this.image = document.createElement("img");
This will create a fresh empty HTML image element.
Now assign it's .src property the source of your gif:
this.image.src=document.getElementById("walk").src;
and set the CSS position property to absolute :
this.image.style="position:absolute;";
finally add this new image element to the body using:
document.body.appendChild(this.image);
If you hit run you will still not see any movement because there's still a little fix to do!
Find this line:
walkers[o].image.style.left = walkers[o].x;
and change it to this:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.