非线性 DOM 动画

Question

问题：“myMove()”方法有什么作用？ 你能解释一下吗？

#myContainer { 宽度：400px; 高度：400px； 位置：相对； 背景：黄色； } #myAnimation { 宽度：50px; 高度：50px； 位置：绝对； 背景颜色：红色； }

点击我

function myMove() { var elem = document.getElementById("myAnimation"); 变量位置 = 0; var id = setInterval(frame, 10); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } }

Answer 1

快速说明：在这个答案中，我假设最后一个问题是：

What does the `myMove()` method do?

我们先来看看变量：

var elem = document.getElementById("myAnimation");  

var pos = 0;

var id = setInterval(frame, 10);

变量elem指的是在画布上移动的红色框（一个 div 元素）。 我们将pos tick 变量设置为 0，这将控制我们将在屏幕上移动框的次数。 最后， id指的是setInterval函数，它每 10 毫秒调用一次定义的frame函数。

现在让我们看看函数frame ：

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

首先，它运行快速检查以查看刻度是否完成，或者换句话说，检查位置是否为 350。然后，如果是，则停止循环。 如果不是，它通过设置从顶部到pos变量的位置使框向下移动 1 个像素。

所有这些代码都包含在myMove()函数中。