JavaScript 中的动画问题答案

【问题标题】：Issue with Animation in JavaScriptJavaScript 中的动画问题
【发布时间】：2021-09-28 00:13:37
【问题描述】：

我正在尝试用 JavaScript 完成动画，但一切都很好，除了最后一个阶段，我已经输入了内框向左移动的代码，但它仍然向上，开箱即用.请通过指出出了什么问题来提供帮助。问题在于函数 moveleftagain();，最后一个函数。但是我已经明确指示它向左走，它仍然向左走。请帮忙。

var ctr = 0;
var ctr2 = 0;
var inner = document.getElementById('in');
var t = setInterval(moveright, 10);

function moveright() {
  if (ctr == 150) {
    clearInterval(t);
  } else {
    ctr += 1;
    inner.style.left = ctr + "px";
  }
}
var t2 = setInterval(movedown, 10);

function movedown() {
  if (ctr == 150) {
    if (ctr2 == 150) {
      clearInterval(t2);
    } else {
      ctr2 += 1;
      inner.style.top = ctr2 + "px";
    }
  }
}
var t3 = setInterval(moveleft, 10);

function moveleft() {
  if (ctr2 == 150) {
    if (ctr == 0) {
      clearInterval(t3);
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}
var t4 = setInterval(moveup, 10);
var check = false;
var checkdiag = false;

function moveup() {
  if (ctr == 0) {
    if (ctr2 == 0) {
      clearInterval(t4);
      check = true;
    } else {
      ctr2 -= 1;
      inner.style.top = ctr2 + "px";
    }
  }
}
var t5 = setInterval(movediagonalright, 10);

function movediagonalright() {
  if (check == true) {
    if (ctr == 150) {
      clearInterval(t5);
      checkdiag = true;
    } else {
      ctr += 1;
      ctr2 += 1;
      inner.style.left = ctr + "px";
      inner.style.top = ctr2 + "px";
    }
  }
}
var t6 = setInterval(moveleft2, 10);
var checkdiagleft = false;

function moveleft2() {
  if (checkdiag == true) {
    if (ctr == 0) {
      clearInterval(t6);
      checkdiagleft = true;
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}

var t7 = setInterval(movediagonalrightup, 10);
var checkdiagright = false;

function movediagonalrightup() {
  if (checkdiagleft == true) {
    if (ctr == 150) {
      clearInterval(t5);
      checkdiagright = true;
    } else {
      ctr += 1;
      ctr2 -= 1;
      inner.style.left = ctr + "px";
      inner.style.top = ctr2 + "px";
    }
  }
}
var t7 = setInterval(moveleftagain, 10);

function moveleftagain() {
  if (checkdiagright == true) {
    if (ctr == 0) {
      clearInterval(t7);
    } else {
      ctr -= 1;
      inner.style.left = ctr + "px";
    }
  }
}

<html>

<head>
  <title></title>
  <style type="text/css">
    #out {
      height: 200px;
      width: 200px;
      background: #FF0000;
      position: relative;
    }
    
    #in {
      height: 50px;
      width: 50px;
      background: #000000;
      position: absolute;
    }
  </style>
</head>

<body>

  <div id="out">
    <div id="in"></div>
  </div>

</body>

</html>

【问题讨论】：

听说过 CSS 动画吗？它更加清晰和简单。 w3schools.com/css/tryit.asp?filename=trycss3_animation2
@RandyCasburn 向某人指出更好的优化解决方案没有害处，tbh。
@RandyCasburn 这是一条评论。对于一个完全偏离轨道的答案，我会理解这种苛刻，但评论“你试过了吗？”没有。
var t7 被声明了两次并在movediagonalrightup() 中清除了错误的间隔
@DOCTYPEHTML 是的，我也使用 CSS 动画，但这是我正在完成的项目的一部分，只是为了磨练我的逻辑。

标签： javascript html css animation

【解决方案1】：

movediagonalrightup 继续运行并将 ctr 递增 1，而您尝试在 moveleftagain 中递减它

您可能想在movediagonalrightup 中输入clearInterval(t7);。这个var t7 = setInterval(moveleftagain, 10); 也应该是var t8 = setInterval(moveleftagain, 10); 你有两个t7

这是一个有效的fiddle，所以你可以玩

【讨论】：

哦，我的方法有误，基本上我所做的是，因为向左移动的功能是相同的，我所做的是从上面复制我为向左移动创建的功能，但是然后我忘了更改间隔的新计时器，由于大部分代码看起来都一样，我根本找不到错误，即使它就在你面前，我什至没有看你的小提琴，我所看到的是你的答案“movediagonalrightup 一直在运行”中的那一行，我明白错误是什么，谢谢。