图像移动不平滑，而图像移动缓慢

我试图连续向左移动图像(有时间延迟(，但我无法获得平滑效果。我正在得到生涩的效果。我在setTimeout中使用requestAnimationFrame，如下所示。

<!DOCTYPE html>
<html>
    <head>
        <title>Moving Screen Saver</title>
        <style>
            html, body {
              background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
                background-repeat: no-repeat;
            background-size: cover;
                position: relative;
                height: 100%;
                width: 100%;
            }
            #poster {
                background-image: url("https://s14.postimg.cc/582ctpzj5/gladiator.png");
                position: absolute;
                background-position:right 20px bottom 20px;
                background-repeat: no-repeat;
                width: 100%;
                height: 100%;
                z-index: 99999;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div id="poster"></div>
        <script>
            var poster = document.getElementById('poster');
            var animate;
            function moveLeft()
            {
                poster.style.left = poster.style.left || 0;
                poster.style.left = parseInt(poster.style.left) - 10 + 'px';
                setTimeout(function() {
                        requestAnimationFrame(moveLeft);
                        }, 50);
                //requestAnimationFrame(moveLeft);
            }
            moveLeft();
        </script>
    </body>
</html>

如果我在 setTimeout(( 中将间隔更改为 10(或者如果我只使用 requestAnimationFrame 而不是超时(，则移动很平稳，但它太快了，用户无法正确看到。谁能让我知道无论如何都可以通过缓慢移动来实现平滑效果？

下面是jsfiddle链接

https://jsfiddle.net/un45c6s3/7/

正如评论中指出的那样，这个简单的效果最好使用 CSS 过渡来完成，但是，为了学习：

使用setTimeout总是会让事情变得生涩，因为setTimeout时间并不完全一致

下面的代码只使用requestAnmationFrame，速度可调(以像素/秒为单位指定(

注意：parseInt 更改为 parseFloat - 因为您可以对元素进行分数定位

var poster = document.getElementById('poster');
var animate;
var previousMs = 0;
var speed = 100; // pixels per second
function moveLeft(ms) {
  if (previousMs !== 0) {
    var delta = ms - previousMs;
    // lets say we want to move 100px per second
    // we have d milliseconds, so speed*delta/1000;
    poster.style.left = poster.style.left || 0;
    poster.style.left = parseFloat(poster.style.left) - (speed * delta / 1000) + 'px';
  }
  previousMs = ms;
  requestAnimationFrame(moveLeft);
}
requestAnimationFrame(moveLeft);

html,
body {
  background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100%;
  width: 100%;
}
#poster {
  background-image: url("https://s14.postimg.cc/582ctpzj5/gladiator.png");
  position: absolute;
  background-position: right 20px bottom 20px;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: transparent;
}

<div id="poster"></div>

现在，您在评论中提到您想在动画完成后执行某些操作

您可以使用 CSS 过渡和事件来执行此操作

window.addEventListener('load', () => {
  var poster = document.getElementById('poster');
  poster.classList.add('move');
  var done = function() {
	  poster.classList.toggle('move');
  };
  poster.addEventListener('transitionend', done);
});

html,
body {
    background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
}
#poster {
    background-image: url("https://s14.postimg.cc/582ctpzj5/gladiator.png");
    position: absolute;
    background-position: right 20px bottom 20px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: transparent;
    left:0;
    transition:left 5s linear;
}
#poster.move {
    left:-100%;
}

<div id="poster"></div>

为什么要在javascript中这样做？你能用CSS吗？

CSS中的动画很棒，并且受到浏览器的支持，请尝试这种方式

单击图像进行动画处理。

html, body {
	background-image: url("https://s14.postimg.cc/jei3ov2nl/moon_bg.png");
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
	height: 100%;
	width: 100%;
			}
			
#poster {
	background-image: url("https://s14.postimg.cc/582ctpzj5/gladiator.png");
	position: absolute;
	background-position:right 20px bottom 20px;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-color: transparent;
        /* transition animation slow */
        transition: right 1000ms ease; 
        /* set init of animation */
        right:0%; 
			}
 .posterToLeft{
        right: 100% !important; 
        /* for example end of animation-transition */
      }

	<div id="poster" onclick='this.className +=" posterToLeft";'></div>

相关内容

最新更新

热门标签：