Javascript 动画不流畅？ [关闭]
Posted
技术标签:
【中文标题】Javascript 动画不流畅？ [关闭]【英文标题】：Javascript Animation Not Smooth? [closed] 【发布时间】：2019-03-21 05:04:09 【问题描述】：var positioner=0;
var ames=setInterval(animate, 100);
function animate()
if(positioner < 1536)
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;
elsedocument.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 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>这是我的代码，我想问的是：
-
为什么图像不流畅？？我说动画就像每隔几秒刷新一次
鼠标悬停时如何让图片移动（onMouseOver）？
【问题讨论】：
#NoRepro Erm... 我觉得没问题。在这里使用一台非常愚蠢的机器......我的机器慢得要命。它渲染得很好。 :)
@PraveenKumarPurushothaman 对我来说，看起来图像在每个周期结束后完全变白，然后在很长一段时间后重新出现
“不流畅”是什么意思？也请不要问多个问题。
【参考方案1】：
您只需要更改条件，因为定位器位于图像的空白部分。现在定位器在显示空白部分之前变为 0。如果你不想让gif闪烁，你需要设置positioner <= length of image。
var positioner=0;
var ames=setInterval(animate, 100);
function animate()
if(positioner <= 1000)
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;
elsedocument.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 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>【讨论】：
问题是“为什么不流畅”。你已经修复它（大概）现在解释为什么/如何 @Liam 我解释了。【参考方案2】：注意：您的第一个问题的答案是 - 您的动画设置为 100，但您在动画结束/开始时的位置是 1536 将其更改为 1000。
第二个问题 - 试试这个：
<img onmouseout="animate(this)" onmouseout="dontAnimate(this)" src="smiley.gif" >
function dontAnimate()
// Do your thingy!
// Stop the animation
;
【讨论】：
【参考方案3】：通过放慢速度，很明显你在最后显示了一个空帧。如果您在渲染每个循环后更改代码以评估 positioner 是否超过最大值，这将为您解决问题。
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 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>【讨论】：
以上是关于Javascript 动画不流畅？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章