Javascript 简单的动画循环

Question

我是 javascript 的新手，在跳转到 jQuery 和所有其他库之前尝试学习基础知识，因此我可以理解正在发生的事情（或者甚至能够尝试）我已经尝试运行一个带有 for 循环的简单动画，由 onclick 激活。有一个div (id=demo), 4 类 of CSS for the div (up, down, left, right, all modifing the position:relative) 我想让它做方块运动。

<div id="demo" class="left" onclick="initElemAnim()"

css

#demo {
    width:100px;
    height:100px;
    background-color: red;
    -webkit-transition: 2s linear;
    position:relative;
    left: 0px;
    }

  #demo.right {
    position: relative;
    left: 200px;
  }

  #demo.left {
    position: relative;
    left:0px;
  }
  #demo.down {
    position: relative;
    top:200px;
  }
  #demo.up {
    position: relative;
    bottom:200px;
  }

js

var elem = document.getElementById("demo");
  var useMe = ["right", "down", "left", "up"];
  var i = 0;

  function initElemAnim() {
    for (; i < 4; ) {
      elem.className = useMe[i];
      setTimeout(i+=1, 2000);
    }
}

Link 编码 http://jsbin.com/holusevedo/1/watch?html,css,js,output

点击后发生的事情是 - 红色方块消失。

怎么了？谢谢。

Answer 1

因为i是一个全局变量，你可以这样做：

  function initElemAnim() {
      if(i==3)i=0;
      elem.className = useMe[i++];
   }

setInterval(initElemAnim, 4000);

setTimeout只调用一次函数，而setInterval每次调用的函数满足时间period.So可以循环4次类.

Answer 2

您需要为动画中的每个点设置 bot left 和 top，否则从 "left" 步骤到 "down" 元素将沿对角线移动到左下角（因为 .down 没有 left 属性，所以浏览器将 top 设置为 200px，将 left 设置为 0。

然后你的循环同时开始所有超时，所以所有 class 更改将在两秒后执行，元素上唯一的 class 名称将来自超时完成的那个最后的。你应该使用 setInterval.

CSS

#demo.tl {
  left:0;
  top:0
}

#demo.tr {
  top:0;
  left:200px;
}

#demo.br {
  left:200px;
  top:200px;
}
#demo.bl {
  top:200px;
  left:0;
}

JS:

 var elem = document.getElementById("demo");
 var useMe = ["tr", "br", "bl", "tl"];
 var i = 0;

  function initElemAnim() {
    setInterval(function(){
      // this function executes every 2000ms, 
      // setting the class name then incrementing the counter
      // or going back to 0 if it reaches the last class name
      elem.className = useMe[i];
      i = i < 3 ? i+1 : 0;
    }, 2000);
}

http://jsbin.com/holusevedo/3/watch?html,css,js,output

Answer 3

将您的 css 更改为

 #demo {
width:100px;
height:100px;
background-color: red;
-webkit-transition: 1s linear;
position:relative;
margin-left: 0px;
}

#demo.right,#demo.down {
margin-left: 200px;
}

#demo.left {
margin-left:0px;
}
#demo.down,#demo.left {
margin-top:200px;
}
#demo.up {
margin-top:0px;

}

和你的脚本

var elem = document.getElementById("demo");
  var useMe = ["right", "down", "left", "up"];
  var interval;

  function initElemAnim() {
  var i = 0;
    elem.className = useMe[i];
    interval = setInterval(function(){ 
            if(i < 4){
            i = i + 1;
            elem.className = useMe[i];
            }
            else{
                clearInterval(interval);
            }
        }, 1000);
}

使用 setInterval() 而不是 setTimeout()。

Javascript 简单的动画循环

Javascript simple animation loop

html

javascript

css

animation