Question

我试图将图像连续向左移动（有时间延迟），但我无法获得平滑效果。我的生涩效果。我在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而不是timeout），则移动很平滑但是速度太快而且用户无法正常查看。任何人都可以让我知道是否有缓慢移动来实现平滑效果？

以下是jsfiddle链接

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

Answer 1

正如评论中所指出的，这种简单的效果最好使用CSS过渡，但为了学习：

使用setTimeout会让事情变得不稳定，因为setTimeout时间并不完全一致

以下代码仅使用requestAnmationFrame，速度可调（以每秒像素数指定）

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

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

现在，你在评论中提到你想在动画完成时做点什么

您可以使用CSS过渡和事件

来实现

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

Answer 2

为什么在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>

图像移动缓慢时图像的移动不平滑

2 个答案: