如何用javascript制作动画

Posted 2021-03-31

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

当我点击button1时，红色方块从（左上角）到（右下角）。

我需要制作另一个按钮（button2），这样当我点击它时，我需要红色方块回到开头。

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

我应该在第二个功能中做些什么改变？

这是代码

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

  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}

function myMove2() {

}

#container {
	width: 400px;
	height: 400px;
	position: relative;
	background: yellow;
}

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

<p>
  <button onclick="myMove1()">button 1</button>
  <button onclick="myMove2()">button 2</button>
</p>

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