在javascript中连续循环动画答案

【问题标题】：Looping an animation in javascript continuously在javascript中连续循环动画
【发布时间】：2016-09-18 01:22:50
【问题描述】：

我的问题是如何连续循环动画。例如，请按照 W3School 下面的链接，其中一个简单的框从上到下移动然后停止。

http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

但我想不通的是如何让这个盒子动画不间断，即在它到达底部之后它再次向上移动到它的起始位置并且动画永远持续下去。

【问题讨论】：

你的代码是什么。此外，我们不必访问链接来回答您的问题（如果链接变暗怎么办）
为什么要编写自己的动画代码而不是仅仅使用 CSS 过渡或动画？

标签： javascript animation dom

【解决方案1】：

您可以对 JS 进行这些调整：

var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 10);

function frame() {
  if (pos == 150) { pos = 0; }
  pos++;
  elem.style.top = pos + 'px';
  elem.style.left = pos + 'px';
}

#container { width: 200px; height: 200px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }

<div id ="container">
  <div id ="animate"></div>
</div>

【讨论】：

好的理解，但我不希望它喜欢反弹。到达底部后，我希望它从初始位置重新开始。我该怎么办？
@AbhrapratimNag 哦，好吧，这更容易。我改变了我的答案来做到这一点。
是的，这正是我想要的。虽然我想这里禁止说谢谢，但还是非常感谢。

【解决方案2】：

删除停止动画计时器的clearInterval(id);，并在其位置添加此pos = 0;，以在每次到达角落时重新定位框。

【讨论】：

【解决方案3】：

将脚本更改为此，它将不再停止。需要runAlready来锁定第二个矩形的出现，在if语句中pos=0将矩形的坐标设置为左上角。

var runAlready=false;
function myMove() {
  if(!runAlready){
  runAlready=true;
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      pos=0;
    } else {
      pos++; 
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
  }
}

【讨论】：

【解决方案4】：

setInterval(frame, 5) 告诉程序每 5/1000 秒调用一次 frame() 函数。这就是创建动画的原因。

clearInterval(id) 函数告诉它停止动画。

看看我在下面添加的更改。它使用一个名为“direction”的变量来改变盒子的方向。当盒子到达 LR 角时，它不会停止动画，而是反转方向并继续前进。

function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  var direction = 1;
  function frame() {
    if (pos == 0){
        direction = 1;
    } else if(pos == 350){
        direction = -1;
    }
    pos += direction; 
    elem.style.top = pos + 'px'; 
    elem.style.left = pos + 'px'; 
  }
}

【讨论】：