Question

我在JavaScript html画布中制作简单的动画。目前我有一个功能，使元素（图像）无限下降。我想扭转它并使其无限向上（从页面底部开始向上和向上移动），但我的所有尝试和实验都失败了。
我会很感激任何想法！

这是我的功能，它可以移动元素：

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之间的谈话能力。

然而，作为一个提示：当元素移出视线时你会想要停止循环，否则你会做不必要的代码调用，因此在那里添加一个条件来停止循环是需要考虑的事情。

动画元素在html5 / javascript画布中向上移动

1 个答案: