如何使用javascript制作动画

我的任务是用JavaScript制作动画。
基本上我有两个正方形（红色和黄色）和两个按钮（按钮1和按钮2）

当我点击

按钮1

时，红色方块从（左上角）到（右下角）

我需要制作另一个按钮（

button2

），这样当我点击它时，我需要红方块返回到开头

我需要它做相反的移动（从右下角移动到左上角）

我应该在第二个函数中做什么更改

这是密码

函数myMove1（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（位置==350）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
}
}
}
函数myMove2（）{
}

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

按钮1
按钮2

我假设老师在教基本的javascript，然后告诉你我将如何用你提供的部分解决这个问题

也就是说，您的评论者是正确的，requestAnimationFrame是正确的工具。此外，您的间隔延迟5毫秒非常短（125fps）。如果你做了这个数字，我建议把它改为16，大约60帧/秒

//我们希望每个函数都能看到这些变量。
var-pos=0；
//-1、0或1，取决于您是向前、向后还是向后移动
//停下来。
var方向=0；
//这个变量现在有两个用途，一个是数字，另一个是
//interval id或其falsy，我们可以使用它来理解动画
//已经停止了。
var id=null；
//在此处执行此操作将使浏览器不必在上重复此步骤
//每一帧。
var elem=document.getElementById（“动画”）；
//将元素渲染到正确的起始位置。
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
//单个动画功能。
函数框架（）{
//假设我们的航向是350。
var目标=350
如果（方向<0）{
//除非目标为-1，否则当目标为0时。
目标=0
}
如果（位置！=目标）{
pos+=方向；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
}否则{
//重置所有共享变量。
方向=0；
清除间隔（id）；
id=null；
}
}
函数myMove1（）{
如果（id）{
清除间隔（id）
}
方向=1；
id=设置间隔（第5帧）；
}
函数myMove2（）{
如果（id）{
清除间隔（id）
}
方向=-1；
id=设置间隔（第5帧）；
}

#制作动画{
位置：绝对位置；
宽度：10px；
高度：10px；
背景色：红色；
}

文件

按钮1
按钮2

我假设老师在教基本的javascript，然后告诉你我将如何用你提供的部分解决这个问题

也就是说，您的评论者是正确的，requestAnimationFrame是正确的工具。此外，您的间隔延迟5毫秒非常短（125fps）。如果你做了这个数字，我建议把它改为16，大约60帧/秒

//我们希望每个函数都能看到这些变量。
var-pos=0；
//-1、0或1，取决于您是向前、向后还是向后移动
//停下来。
var方向=0；
//这个变量现在有两个用途，一个是数字，另一个是
//interval id或其falsy，我们可以使用它来理解动画
//已经停止了。
var id=null；
//在此处执行此操作将使浏览器不必在上重复此步骤
//每一帧。
var elem=document.getElementById（“动画”）；
//将元素渲染到正确的起始位置。
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
//单个动画功能。
函数框架（）{
//假设我们的航向是350。
var目标=350
如果（方向<0）{
//除非目标为-1，否则当目标为0时。
目标=0
}
如果（位置！=目标）{
pos+=方向；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
}否则{
//重置所有共享变量。
方向=0；
清除间隔（id）；
id=null；
}
}
函数myMove1（）{
如果（id）{
清除间隔（id）
}
方向=1；
id=设置间隔（第5帧）；
}
函数myMove2（）{
如果（id）{
清除间隔（id）
}
方向=-1；
id=设置间隔（第5帧）；
}

#制作动画{
位置：绝对位置；
宽度：10px；
高度：10px；
背景色：红色；
}

文件

按钮1
按钮2

您的要求很简单：使用您已经编写的函数，并在

pos

上更改增量方向。唯一的区别是，您需要分别跟踪

x

和

y

坐标，因为它们朝相反的方向移动。我使用此对象初始化为框的起始位置：

pos = {x: 350, y: 0};

函数myMove1（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
变量id=设置间隔（第5帧）；
函数框架（）{
如果（位置==350）{
清除间隔（id）；
}否则{
pos++；
elem.style.top=pos+'px'；
elem.style.left=pos+'px'；
}
}
}
函数myMove2（）{
var elem=document.getEl