Javascript Animation Not Smooth?

Question

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if(positioner < 1536){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

That's my code, and what i want to ask is:

why the image not smooth?? I say the animation is like refreshing every some of seconds
how to make the image moving when the MouseOver (onMouseOver)?

`#NoRepro` Erm... Looks okay to me. Using a pretty dumb machine here... My machine's slow as hell. And it renders alright. `:)` — Praveen Kumar Purushothaman, Oct 16 '18 at 15:42
@PraveenKumarPurushothaman To me, it looks like the image goes completely white after the end of each cycle, then reappears a noticeable amount of time later — GrumpyCrouton, Oct 16 '18 at 15:45
What does "not smooth" mean? Please don't ask multiple questions too. — Liam, Oct 16 '18 at 15:48

score 2 · Answer 1 · 2018-10-16T15:53:15.547

You just need to change the condition, because the positioner was at empty part of image. Now positioner becomes 0 before the empty part is shown. You need to set positioner <= length of image if you don't want blinking gif.

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if(positioner <= 1000){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

The question was "why is it not smooth". You've fixed it (presumably) now explain why/how — Liam, Oct 16 '18 at 15:51

score 2 · Accepted Answer · answered Oct 16 '18 at 16:02

By slowing it down, it was apparent that you were showing an empty frame at the end. If you change your code to evaluate whether or not positioner is over the max after rendering each loop, that will fix it for you.

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
  document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
  positioner += 256;
  if(positioner >= 1536) positioner = 0
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>

Shaze · Answer 3 · 2018-10-16T16:40:34.193

1

Note: The answer to your first questions is - that your animation is set to 100 but your position when the animation ends/starts is 1536 change it to 1000.

Second question - Try this:

<img onmouseout="animate(this)" onmouseout="dontAnimate(this)" src="smiley.gif" alt="Smiley">

function dontAnimate() {
 // Do your thingy!
 // Stop the animation
};

edited Oct 16 '18 at 16:40

answered Oct 16 '18 at 16:00

Shaze

792
1
9
14

Javascript Animation Not Smooth?

3 Answers3