在html5 / javascript畫布中向上移動的動畫元素

Question

我在JavaScript html canvas中制作簡單的動畫。 目前，我有一個函數可以使元素（圖像）無限下降。 我想反轉它並使它無限上升（從頁面底部開始，然后向上和向上移動），但是我的所有嘗試和實驗都失敗了。
我將不勝感激任何想法！

這是我擁有的功能，可將元素向下移動：

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

我不確定這與畫布有什么關系，但是您可以簡單地執行以下操作以使Image元素向上移動。

將起始增量反轉為減量

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之間的健談性，從而提高性能。

但是，提示：當元素移出視線時，您將要停止循環，否則將執行不必要的代碼調用，因此要在其中添加條件以停止循環。