Question

我已经完成了这个简单的动画，但我感觉我为这么简单的任务写了很多行代码。有没有办法实现相同的结果但代码更少？

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

  function frame() {
    if (flag) {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == 350) {
        flag = false;
      }
    } else if (!flag) {
      pos--;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
      if (pos == 0) {
        flag = true;
      }
    }
  }
}

P.S：没有jquery或css动画，只是javascript。

Answer 1

而不是使用标志和2个条件的单独代码，你可以像这样翻转增量器：

{{1}}

Answer 2

现在可以使用CSS在现代浏览器中完成动画。例如，您可以使用CSS过渡将javascript动画压缩为几行。

有关transitions和animations的详细信息和示例，请参阅MDN。

运行下面的代码段尝试

window.ball.addEventListener('transitionend', toggle);

function toggle() {
  window.ball.classList.toggle('move');
}

.animation {
  position: relative;
  background-color: lightyellow;
  border: 1px solid gray;
  height: 200px;
  width: 200px;
}

#ball {
  transition-property: left top background-color;
  transition-duration: 2s;
  position: absolute;
  background-color: red;
  border-radius: 12px;
  height: 25px;
  width: 25px;
  left: 0;
  top: 0;
}

#ball.move {
  background-color: blue;
  left: 175px;
  top: 175px;
}

<button onclick="toggle()">Start</button>
<div class="animation"><div id="ball"></div></div>

Answer 3

好吧，你可以缩短你的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
  }
}

Answer 4

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

IObservable<bool> canExecute = this
  .WhenAnyValue(x => x.InsertableItems, x => x.IsRefreshing,
  (insertableItems, isRefreshing) => !isRefreshing && insertableItems > 0);

canExecute.Subscribe(x => this.Logger.LogInformation("Can execute changed: {0}", x));

this.ConvertCmd = ReactiveCommand.CreateAsyncTask(canExecute, ConvertCmdExecute);

并调用两次：frame（1，true，350）和帧（-1，假，0）

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

4 个答案: