Как прекратить анимацию

Question

Я довольно новичок в программировании и только что начал изучать Javascript. Я создаю личное портфолио, в котором я хочу, чтобы изображение меня скользило горизонтально с одного конца экрана на другом конце. У меня есть код, который заставляет его скользить вправо по горизонтали, но я не знаю, как его остановить.

Мой код выглядит следующим образом на данный момент:

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; 

Я думаю, что я должен написать, если заявление и позвонить на функцию clearTimeout остановить анимацию, но я не могу понять код. Любая помощь будет отличной.

Answer 1

Добавить прекратить состояние в doMove функции

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

    if(terminateConditionFullfiled) 
     return; 

    setTimeout(doMove); 
} 

Answer 2

Ключ является то, что вы вызываете doMove() рекурсивно, используя setTimeout() сместить элемент на частоту кадров, который воспринимаемый человеческим глазом. Чтобы остановить рекурсивную функцию, ввести условие, чтобы прекратить это, например, так:

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

---

Рассмотрите возможность использования CSS transforms вместо модификации left/right свойства, прообразы лучше оптимизированы и дадут лучшая частота кадров.

Также рекомендуется использовать requestAnimationFrame вместо setTimeout. К счастью, он работает так же, как и в случае использования.

Optimised demo

---

Вы также можете просто использовать CSS и ничего больше. Вы можете обрабатывать анимацию с помощью переходов CSS или анимации ключевого кадра CSS.

CSS-based Demo