Javascript简单动画循环

Javascript simple animation loop

本文关键字：循环 动画 简单 Javascript      更新时间：2023-09-26

我是javascript的新手，在跳到jQuery和所有其他库之前，我试图学习基础知识，这样我就可以理解发生了什么（或者甚至可以尝试）我尝试运行一个简单的动画，带有 for 循环，由 onclick 激活。有一个div （id=demo），4 类 CSS 用于div（上、下、左、右，都修改了位置：相对），我想让它以方形运动移动。

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

链接到代码 http://jsbin.com/holusevedo/1/watch?html,css,js,output

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

怎么了？谢谢。

您需要

为动画中的每个点设置机器人left和top，否则从"左"步到"下"，元素将沿对角线移动到左下角（因为.down没有left属性，因此浏览器将动画top为 200px 和 left 更改为 0）。

然后，您的循环在同一时刻启动所有超时，因此所有类更改将在两秒后执行，并且元素上的唯一类名将来自最后完成的超时。您应该使用 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

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

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

setTimeout只调用函数一次，而setInterval每次都调用该时间段的函数。这样您就可以循环 4 个类。

将 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（）。

相关文章：