Question

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

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

但是我无法弄清楚如何使这个盒子动画不停止，即在它到达底部之后它再次移动到它的起始位置并且动画将永远持续。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

在javascript中不断循环播放动画

4 个答案: