在JavaScript中使用setInterval设置动画

问题是如何通过第二次单击使列车返回初始位置

本例中的动画在左侧从0到400px绘制。我需要再次单击以从400px绘制到0，这样列车将返回其原始位置

在这个动画中，为什么在400px中火车并不总是重要的，以及我们在使用这个函数时如何达到准确度

train.onclick=函数（）{
var start=Date.now（）；//
var timer=setInterval（函数（）{
//选择持续时间
var timePassed=Date.now（）-start；
train.style.left=经过的时间/5+‘px’；
如果（时间经过>2000）清除间隔（计时器）；
}, 20);
}

#列车{
位置：相对位置；
光标：指针；
}

---

新CSS规范最好的一点是，您可以将所有这些事情留给CSS，而使用JavaScript纯粹是为了交互。例如，最好的方法是：

document.getElementById("train").onclick = function() {
  this.classList.toggle("end");
}

以上是您唯一需要的JavaScript。所有的魔法都是由CSS完成的。其优点在于，它使用了比CPU更高效的GPU。请参见代码片段：

document.getElementById（“train”）.onclick=function（）{
this.classList.toggle（“结束”）；
}

#列车{
位置：相对位置；
左：0；
光标：指针；
-webkit转换：左2；/*Safari*/
过渡：左2秒；
}
#火车头{
左：400px；
}

---

新的CSS规范最好的一点是，您可以将所有这些事情留给CSS，而使用JavaScript纯粹是为了交互。例如，最好的方法是：

document.getElementById("train").onclick = function() {
  this.classList.toggle("end");
}

以上是您唯一需要的JavaScript。所有的魔法都是由CSS完成的。其优点在于，它使用了比CPU更高效的GPU。请参见代码片段：

document.getElementById（“train”）.onclick=function（）{
this.classList.toggle（“结束”）；
}

#列车{
位置：相对位置；
左：0；
光标：指针；
-webkit转换：左2；/*Safari*/
过渡：左2秒；
}
#火车头{
左：400px；
}

---

我修改了您的代码，下面的代码运行良好：

window.onload = function() {
var train = document.getElementById("train");
var isLeftToRight = 0;
var startPosition = 0;

train.onclick = function() {
    isLeftToRight = 1 - isLeftToRight;
    var start = Date.now(); // сохранить время начала

    var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;
    if(isLeftToRight) train.style.left = timePassed / 5 + 'px';
    else train.style.left = (startPosition - timePassed / 5) + 'px';

    if (timePassed > 2000) {
        clearInterval(timer);
        startPosition = timePassed / 5;
    }
  }, 20);
}

---

我修改了您的代码，下面的代码运行良好：

window.onload = function() {
var train = document.getElementById("train");
var isLeftToRight = 0;
var startPosition = 0;

train.onclick = function() {
    isLeftToRight = 1 - isLeftToRight;
    var start = Date.now(); // сохранить время начала

    var timer = setInterval(function() {
    // вычислить сколько времени прошло из opts.duration
    var timePassed = Date.now() - start;
    if(isLeftToRight) train.style.left = timePassed / 5 + 'px';
    else train.style.left = (startPosition - timePassed / 5) + 'px';

    if (timePassed > 2000) {
        clearInterval(timer);
        startPosition = timePassed / 5;
    }
  }, 20);
}

---

我完全同意你的看法。但我还有一个任务，就是实现这个功能。我完全同意你的观点。但是我还有另一个任务，要用这个函数来实现。不要依赖于间隔。你应该有4个常数。开始位置、开始时间、结束位置和结束时间。在这两者之间，使用requestAnimationFrame使代码尝试达到30fps以上。对于每个帧，获取当前时间，并可以使用该时间计算元素应位于的位置。当帧“滞后”时，没有问题。。下一帧将赶上，因为它使用新时间进行计算。有关更多信息，请阅读“游戏循环”，使用greensock或纯css，让浏览器进行此计算。不要依赖间隔。你应该有4个常数。开始位置、开始时间、结束位置和结束时间。在这两者之间，使用requestAnimationFrame使代码尝试达到30fps以上。对于每个帧，获取当前时间，并可以使用该时间计算元素应位于的位置。当帧“滞后”时，没有问题。。下一帧将赶上，因为它使用新时间进行计算。有关更多信息，请阅读“游戏循环”，使用greensock或纯css并让浏览器执行此计算。请通过解释您所做的操作来改进您的答案。当火车从左向右移动时：train.style.left=0,4,8，…392,396,400。之后，startPosition=400。从右向左移动时：train.style.left=400396。392, ...,8, 4, 0. 所以

train.style.left=（startPosition-timePassed/5）+“px”

。请通过解释您所做的事情来改进您的答案。当火车从左向右移动时：train.style.left=0,4,8，…392,396,400。之后，startPosition=400。从右向左移动时：train.style.left=400396。392, ...,8, 4, 0. 所以

train.style.left=（startPosition-timePassed/5）+“px”

。