Анимационный элемент для перемещения вверх в html5/javascript canvas

Question

Я делаю простые анимации в html-холсте JavaScript. В настоящее время у меня есть функция, которая заставляет элемент (изображение) падать бесконечно вниз. Я хотел бы отменить его и сделать его бесконечно (начинаем в нижней части страницы и перемещаемся вверх и вверх), но все мои попытки и эксперименты не удались.
Буду благодарен за любые идеи!

Это функция у меня есть, который перемещает элемент вниз:

function moveDown(){ 
    start += 1; 
    var m = document.getElementById('money'); 
    m.style.top = start + "px"; 
    m.style.left = "300px"; 

} 
var start = 350; 


function rain() { 

    var m = document.createElement('img'); 
    m.id = "money"; 
    m.src = "images/holof.png"; 
    m.style.position = "absolute"; 
    m.style.top = start + "px"; 
    // m.style.top="0px"; 
    m.style.left = "300px"; 
    m.setAttribute("class", "money"); 
    document.body.appendChild(m); 

    setInterval(moveDown, 500); 



} 

Как анимировать его идти дальше?

Answer 1

Я не уверен, что это имеет отношение к холсту, но вы можете просто сделать следующее, чтобы ваш элемент изображения перемещался вверх.

реверсировать приращение начала к декременту

function moveUp(){ 

    start--; /// move up 1 pixel 

    style.top = start + "px"; 
} 

var start = 350; 
var m = document.getElementById('money'); /// cache this here 
var style = m.style;      /// cache style 
style.left = "300px";      /// set once here 

кэширования улучшит производительность, поскольку она уменьшает болтливость между JS и DOM.

Однако, как подсказка: когда элемент переместился с поля зрения, вы захотите остановить цикл, так как иначе вы будете делать ненужный вызов кода, поэтому добавление условия там, чтобы остановить цикл, - это что-то рассмотреть.