Wie man Animation stoppt

Question

Ich bin ziemlich neu zu programmieren und habe gerade angefangen, Javascript zu lernen. Ich erstelle ein persönliches Portfolio, in dem ich möchte, dass ein Bild von mir horizontal von einem Ende des Bildschirms auf das andere Ende gleitet. Ich habe den Code, der es horizontal gleiten lässt, aber ich weiß nicht, wie ich es stoppen kann.

Mein Code sieht wie folgt aus im Moment:

var move = null; 

function doMove() { 
    move.style.left = parseInt(move.style.left) + 2 + 'px'; 
    setTimeout(doMove); 
} 
function init() { 
    move = document.getElementById("myimge"); 
    move.style.left = "0px"; 
    doMove(); 
} 
window.onload = init; 

Ich glaube, soll ich schreiben eine if-Anweisung und rufen die Funktion clear die Animation zu stoppen, aber ich kann den Code herauszufinden. Jede Hilfe wäre großartig.

Answer 1

hinzufügen Bedingung in der Funktion doMove beenden

function doMove() { 
    move.style.left = parseInt(move.style.left) + 2 + 'px'; 

    if(terminateConditionFullfiled) 
     return; 

    setTimeout(doMove); 
} 

Answer 2

Der Schlüssel ist, dass Sie doMove() rekursiv anrufen, setTimeout() mit dem Element bei einer Framerate zu verdrängen, die für das menschliche Auge wahrnehmbar ist. Um eine rekursive Funktion zu stoppen, führen eine Bedingung, es zu beenden, etwa so:

var move = null; 
var body_width = document.body.clientWidth; 

function doMove() { 
    var rect = move.getBoundingClientRect(); 

    // end recursion when the element's displacement to the right matches the width of the body element containing it 
    if(rect.right >= body_width) { 
     return; 
    } 

    move.style.left = parseInt(move.style.left) + 2 + 'px'; 
    setTimeout(doMove); // could also use requestAnimationFrame(doMove); 
} 

function init() { 
    move = document.getElementById("myimage"); 
    move.style.left = "0px"; 
    doMove(); 
} 

window.onload = init; 

Demo

---

Erwägen Sie die Verwendung CSS transforms statt Modifizierung left/right Eigenschaften, wie Transformationen besser optimiert sind und ergeben eine bessere Bildrate.

Es wird auch empfohlen, requestAnimationFrame anstelle von setTimeout zu verwenden. Glücklicherweise funktioniert es für Ihren Anwendungsfall ähnlich.

Optimised demo

---

Sie auch CSS und nichts konnte diese sonst verwenden. Sie können die Animation mit CSS-Übergängen oder CSS-Keyframe-Animationen bearbeiten.

CSS-based Demo