减少这个循环动画的javascript代码？

我做过这个简单的动画，但我觉得我已经为这么简单的任务写了很多行代码。有没有一种方法可以用更少的代码实现相同的结果

---

附言：没有jquery或css动画，只有javascript。

好吧，你可以像这样缩短你的

frame（）

函数：

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

  function frame() {
    if (flag) {
      pos++;
      if (pos == 350) {
        flag = false;
      }
    } else { // since you are checking if flag is true, the only other answer is false
      pos--;
      if (pos == 0) {
        flag = true;
      }
    }
    elem.style.top = pos + 'px'; // since this occurs in both cases
    elem.style.left = pos + 'px'; // you can do it afterward
  }
}

---

您可以将

frame（）

函数缩短如下：

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

  function frame() {
    if (flag) {
      pos++;
      if (pos == 350) {
        flag = false;
      }
    } else { // since you are checking if flag is true, the only other answer is false
      pos--;
      if (pos == 0) {
        flag = true;
      }
    }
    elem.style.top = pos + 'px'; // since this occurs in both cases
    elem.style.left = pos + 'px'; // you can do it afterward
  }
}

---

使用具有3个参数的函数：posAdd、flagValue和posValue

   function frame(posAdd,flagValue,posValue) {
    if (flagValue) {
      pos=pos+posAdd;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == posValue) {
        flag =  !flagValue;
    }
  }
}

并称它两次：frame（1，true，350）

---

和frame（-1，false，0）

使用具有3个参数的函数：posAdd、flagValue和posValue

   function frame(posAdd,flagValue,posValue) {
    if (flagValue) {
      pos=pos+posAdd;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == posValue) {
        flag =  !flagValue;
    }
  }
}

并称它两次：frame（1，true，350）

---

和frame（-1，false，0）

对于这两种情况，不使用标志和单独的代码，您可以像这样翻转递增器：

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

  function frame() {
      pos+=changeVal;
      if ((pos >= 350) || (pos <= 0)) changeVal *= -1;
      elem.style.top = elem.style.left = pos + 'px';
  }
}

函数myMove（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
变量id=设置间隔（第5帧）；
var-changeVal=1；
函数框架（）{
pos+=changeVal；
如果（（pos>=350）| |（pos而不是为这两种情况使用标志和单独的代码，您可以像这样翻转递增器：

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

  function frame() {
      pos+=changeVal;
      if ((pos >= 350) || (pos <= 0)) changeVal *= -1;
      elem.style.top = elem.style.left = pos + 'px';
  }
}

函数myMove（）{
var elem=document.getElementById（“动画”）；
var-pos=0；
变量id=设置间隔（第5帧）；
var-changeVal=1；
函数框架（）{
pos+=changeVal；
如果（（pos>=350）| |（pos动画现在可以在现代浏览器中使用CSS完成。例如，您的javascript动画可以使用CSS转换压缩为几行

有关和的更多详细信息和示例，请参见MDN

运行下面的代码片段以尝试


window.ball.addEventListener（'transitionend'，toggle）；
函数切换（）{
window.ball.classList.toggle（'move'）；
}
。动画{
位置：相对位置；
背景颜色：浅黄色；
边框：1px纯色灰色；
高度：200px；
宽度：200px；
}
#球{
过渡属性：左上角背景色；
过渡时间：2s；
位置：绝对位置；
背景色：红色；
边界半径：12px；
高度：25px；
宽度：25px；
左：0；
排名：0；
}
#球，移动{
背景颜色：蓝色；
左：175px；
顶部：175px；
}
开始
现在可以在现代浏览器中使用CSS制作动画。例如，可以使用CSS转换将javascript动画压缩为几行

有关和的更多详细信息和示例，请参见MDN

运行下面的代码片段以尝试


window.ball.addEventListener（'transitionend'，toggle）；
函数切换（）{
window.ball.classList.toggle（'move'）；
}
。动画{
位置：相对位置；
背景颜色：浅黄色；
边框：1px纯色灰色；
高度：200px；
宽度：200px；
}
#球{
过渡属性：左上角背景色；
过渡时间：2s；
位置：绝对位置；
背景色：红色；
边界半径：12px；
高度：25px；
宽度：25px；
左：0；
排名：0；
}
#球，移动{
背景颜色：蓝色；
左：175px；
顶部：175px；
}
开始
删除所有重复的行如何？删除所有重复的行如何？我发现太晚了，您在setInterval内调用frame（），所以我的答案不适合这种情况。我发现太晚了，您在setInterval内调用frame（），所以我的答案不适合这种情况。