Animation mit setInterval in JavaScript

Die Frage ist, wie man den Zug durch den zweiten Klick in die Ausgangsposition zurückbringt.Animation mit setInterval in JavaScript

Animation in diesem Fall wird von 0 bis 400px in der linken gezeichnet. Ich brauche einen zweiten Klick, um von 400px auf 0 zu zeichnen, damit der Zug in seine ursprüngliche Position zurückkehrt.

Und warum in dieser Animation der Zug nicht immer in 400px wichtig ist, und wie wir Genauigkeit erreichen, wenn Sie diese Funktion verwenden.

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

 
    var timer = setInterval(function() { 
 
    // вычислить сколько времени прошло из opts.duration 
 
    var timePassed = Date.now() - start; 
 

 
    train.style.left = timePassed/5 + 'px'; 
 

 
    if (timePassed > 2000) clearInterval(timer); 
 

 
    }, 20); 
 
}

#train { 
 
    position: relative; 
 
    cursor: pointer; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <img id="train" src="https://js.cx/clipart/train.gif"> 
 
</body> 
 
</html>

Quelle

2017-12-23 RIM

Sie nicht auf das Intervall verlassen . Sie sollten 4 Konstanten haben. Startposition, Startzeit, Endposition und Endzeit. Versuchen Sie zwischen 30 Sekunden und 30 Sekunden pro Sekunde mit requestAnimationFrame. Für jeden Frame holst du die aktuelle Zeit und du kannst damit die Position berechnen, an der das Element sein soll. Wenn der Rahmen "nachläuft", kein Problem. Der nächste Frame wird aufholen, weil er die neue Zeit für die Berechnung verwendet. Für weitere Informationen, lesen Sie in "Game Loop", verwenden Sie GreenSock oder Plain CSS und lassen Sie den Browser diese Berechnung durchführen. –

ich den Code ändern und den Code unten funktioniert gut:

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); 
}

Quelle

2017-12-23 13:05:22

Bitte verbessern Sie Ihre Antwort, indem Sie erklären, was Sie getan haben. – CGritton

Wenn der Zug von links nach rechts: ** train.style.left = 0, 4, 8, ... 392, 396, 400 **. Danach wird start = 400. Wenn es von rechts nach links bewegt: train.style.left = ** 400, 396. 392, ..., 8, 4, 0 **. So 'train.style.left = (start - timePassed/5) + px''‘. –

Das Beste, was über die neue CSS-Spezifikation ist, dass Sie all diese Dinge zu CSS verlassen können und verwenden JavaScript rein für die Interaktion. Zum Beispiel ist der beste Weg, dies zu tun:

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

Das obige ist das einzige JavaScript, das Sie brauchen. Rest all magic wird von CSS erledigt. Der gute Teil dabei ist, es verwendet GPU, die effizienter als CPU ist. Sehen Sie das Snippet:

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

#train { 
 
    position: relative; 
 
    left: 0; 
 
    cursor: pointer; 
 
    -webkit-transition: left 2s; /* Safari */ 
 
    transition: left 2s; 
 
} 
 
#train.end { 
 
    left: 400px; 
 
}

<img id="train" src="https://js.cx/clipart/train.gif" />

Für Browser-Unterstützung finden Can I use?

Quelle

2017-12-23 12:28:41

Ich stimme Ihnen vollkommen zu. Aber ich habe eine andere Aufgabe, mit dieser Funktion zu realisieren. – RIM

Animation mit setInterval in JavaScript

Antwort

Verwandte Themen