如何用javascript制作动画？_Javascript_Html_Css_Animation

如何用javascript制作动画？

javascript html css animation

如何用javascript制作动画？,javascript,html,css,animation,Javascript,Html,Css,Animation,我在w3schools中找到了这个例子，希望修改它的动画使之符合我的喜好。基本上它有两个div，一个作为容器，另一个用于动画。最初，已设置动画的div可以从上到下或从上到左等一个方向移动。但我希望发生的是，一旦它已从上到下设置动画，我希望它从下到上移动。如何做到这一点代码如下： <!DOCTYPE html> <html> <style> #container { width: 400px; height: 400px; position: relative

我在w3schools中找到了这个例子，希望修改它的动画使之符合我的喜好。基本上它有两个div，一个作为容器，另一个用于动画。最初，已设置动画的div可以从上到下或从上到左等一个方向移动。但我希望发生的是，一旦它已从上到下设置动画，我希望它从下到上移动。如何做到这一点

代码如下：

<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 100px;
height: 100px;
position: absolute;
left: 145px;
background-color: red;
}
</style>
<body>

<p>
<button onclick="Move()">Click</button>
</p> 

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

<script>
function Move() {
var elem = document.getElementById("animate");   
var pos = 0;
var id = setInterval(frame, 5);
function frame() {

if (pos < 300) {
  pos++;
  elem.style.top = pos + 'px'; 
  elem.style.bottom = pos + 'px'; 
}

}
}
</script>

</body>
</html>


#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#生动活泼{
宽度：100px；
高度：100px；
位置：绝对位置；
左：145px；
背景色：红色；
}

点击

函数Move（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（位置<300）{
pos++；
elem.style.top=pos+'px'；
elem.style.bottom=pos+'px'；
}
}
}

您可以保留一个变量来检查框的移动方向，并根据边界条件对其进行更改。比如，如果你到达位置0，你可以使方向向下，如果你到达位置300，你可以使方向向上

函数移动（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
var方向='向下'；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（位置>=300）{
方向=‘向上’；
}否则，如果（pos您是否考虑过使用关键帧而不是js

#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#生动活泼{
宽度：100px；
高度：100px；
位置：绝对位置；
左：145px；
背景色：红色；
动画：移动3s线性无限；
}
@关键帧移动{
0% {
排名：0；
}
50% {
顶部：300px；
}
100% {
排名：0；
}
}
您可以修改frame（）
函数以检查方向，然后相应地添加/减去位置，例如
function frame() {

  if(pos >= 300 ) {
    dir = 1;
  }else if (pos <=0) {
    dir = 0;
  }

  if (dir ===0) {
    pos++;
  } else {
    pos--;
  }

   elem.style.top = pos + 'px'; 
   elem.style.bottom = pos + 'px'; 
}

功能框架（）{
如果（位置>=300）{
dir=1；
}如果（pos使用css动画更好，但是如果你想这样做，那么你必须设置一个方向。我修改你的代码并在其中添加方向

函数移动（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
var direction=“向下”；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（方向=“向下”）{
pos++；
elem.style.top=pos+'px'；
elem.style.bottom=pos+'px'；
}否则{
pos--；
elem.style.top=pos+'px'；
elem.style.bottom=pos+'px'；
}
如果（位置==300）{
方向=“向上”；
}
如果（位置==0）{
方向=“向下”；
}
}
}
#容器{
宽度：400px；
高度：400px；
位置：相对位置；
背景：黄色；
}
#生动活泼{
宽度：100px；
高度：100px；
位置：绝对位置；
左：145px；
背景色：红色；
}

点击

这是一个很好的动画参考，其余部分你必须设置一个“方向”，否则如果你只检查垂直位置，它将不起作用。