我的任务是用 JavaScript 制作动画。
基本上我有两个正方形(红色和黄色)和两个按钮(按钮 1 和按钮 2)。
当我点击 button1 时，红色方 block 从(左上角)移动到(右下角)。
我需要制作另一个按钮 (button2)，这样当我点击它时我需要红色方 block 返回到开头。
我需要它做相反的 Action (从右下角移动到左上角)。
第二个函数应该做哪些修改？
这是代码
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>最佳答案
我假设老师正在尝试教授基本的 javascript，并告诉您我将如何使用您提供的部分来解决这个问题。
也就是说，您的评论是正确的，requestAnimationFrame 是这里的正确工具。此外，间隔的 5 毫秒延迟非常短 (125fps)。如果您达到了这个数字，我建议将其更改为 16，即大约 60fps。
// We want each function to be able to see these vars.
var pos = 0;
// Either -1, 0, or 1, depending on if were moving forward, backwards or
// stopped.
var direction = 0;
// This var now serves dual purpose, either its a number which is the
// interval id or its falsy, which we can use to understand the animation
// has stopped.
var id = null;
// Doing this here, will save the browser from having to redo this step on
// each frame.
var elem = document.getElementById("animate");
// Render the elem to the correct starting location.
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
// A single animation function.
function frame() {
// Assume we are heading for 350.
var goal = 350
if (direction < 0) {
// unless the goal is -1, when the goal is zero.
goal = 0
}
if (pos != goal) {
pos += direction;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
} else {
// Reset all the shared vars.
direction = 0;
clearInterval(id);
id = null;
}
}
function myMove1() {
if (id) {
clearInterval(id)
}
direction = 1;
id = setInterval(frame, 5);
}
function myMove2() {
if (id) {
clearInterval(id)
}
direction = -1;
id = setInterval(frame, 5);
} #animate {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<button onclick="myMove1()">button 1</button>
<button onclick="myMove2()">button 2</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>关于javascript - 如何用javascript制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52229810/