我陷入了有关javascript中的雪动画的项目中

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我陷入了有关javascript中的雪动画的项目中相关的知识,希望对你有一定的参考价值。

我必须创建一个脚本来模拟javascript中雪的动画(如果可能,我希望不使用画布)。我被困在这一点上,我不知道错误在哪里。当我运行程序谷歌浏览器崩溃且控制台没有给我错误时,我认为该错误是由于循环或某些不正确的语句所致,我附上了代码,希望对您有所帮助!

    var direction=true; //true=right false =left
    var active=true;     //if true run the cycle,false stops the cycle
    function startSnow() 

var _snowflakes = new Array(30);    
var wid=50;                       //distance from a snowflake to another
var counterX;                     //var for editing the x position
var counterY;                     //var for editing the y position
for (var i=0; i< 30; i++)         //cycle that initializes snowflakes

    _snowflakes[i] = document.createElement("img");   
    _snowflakes[i].setAttribute("src","snowflake.png"); // setting the image
    _snowflakes[i].setAttribute("class", "snowflake"); //setting the css style
    _snowflakes[i].style.visibility ="inherit";       //when the function is running snowflakes have to be visible, when it finishes they have to be invisible
    _snowflakes[i].style.right = (wid*i)+"px";        //set the distance from the left margin
    _snowflakes[i].style.top = "30px";           // set the distance from the top
    document.getElementById("background").appendChild(_snowflakes[i]);

while(active)

        move();

function move()  //function that moves the snowflake
        
            for(;;)
        
            if(counterY>=600)   //when the snowflake reaches 600px from the top the function has to stop and hide snowflakes
            
                for(var i=0;i<30;i++)
                    _snowflakes[i].style.visibility = "hidden";
                active=false;
                break;
                            
             else
            
                if ((counterY%50)==0)
                    
                        direction=!direction   //every 50 Y pixels the snoflake change direction
                    
                counterY++;
                for(var i=0;i<30;i++)
                    
                        _snowflakes[i].style.top = counterY+"px";       //Y movement     
                        if (direction==true)
                            
                                _snowflakes[i].style.right = (_snowflakes[i].offsetLeft+counterX) + "px";      //x right movement
                                counterX++;
                            
                        else
                            
                                _snowflakes[i].style.right = (_snowflakes[i].offsetLeft+counterX) + "px";      //x left movement
                                counterX--;
                            
                    
            
        
    

答案

确实,您的代码进入了无限循环,因为变量counterY尚未初始化,因此其值为undefined。在undefined上加1会得到NaN,因此您永远都不会进入该break语句。

但是更重要的是,您需要一种不同的方法,因为即使您解决了此问题,也永远不会看到动画的发生。为了实际观看动画,您需要给浏览器一些时间来更新显示。因此,whilefor(;;)循环是不可能的。

而不是一次调用move,然后在该函数内部的else块中,调用requestAnimationFrame(move)。这将使浏览器有时间在move被称为增益之前重新绘制。删除for(;;)循环,然后删除break

水平移动方式也存在逻辑错误。当您读取当前的offsetLeft时,增加counterX毫无意义,因为这会导致向右(或向左)的跳跃(相对)跳跃。取而代之的是,您只需在offsetLeft上加上(或减去)1即可–可以取消counterX。另外,不要将其分配给style.right,而是分配给style.left

因此,所有内容放在一起(请参见有更改的注释):

var direction=true;
var active=true;

function startSnow()     
    var _snowflakes = new Array(30);    
    var wid=50;
    // var counterX = 0; -- not used.
    var counterY = 0; // Need to initialise!
    for (var i=0; i< 30; i++) 
        _snowflakes[i] = document.createElement("img");   
        _snowflakes[i].setAttribute("src", "snowflake.png");
        _snowflakes[i].setAttribute("alt", "❄"); // added for when image not found
        _snowflakes[i].setAttribute("class", "snowflake");
        _snowflakes[i].style.visibility = "inherit";
        _snowflakes[i].style.left = (wid*i)+"px"; // assign to style.left
        _snowflakes[i].style.top = "30px";
        document.getElementById("background").appendChild(_snowflakes[i]);
    

    // No while loop. Just call move    
    move();
    
    function move() 
        //No for (;;) loop
        if (counterY>=600) 
            for (var i=0;i<30;i++) 
                _snowflakes[i].style.visibility = "hidden"; // you forgot the underscore
            
            active=false;
            // No break -- function will just return
         else 
            if ((counterY%50)==0) 
                direction=!direction
            
            counterY++;
            for (var i=0;i<30;i++) 
                _snowflakes[i].style.top = counterY+"px";
                if (direction==true) 
                    // assign to style.left, 
                    _snowflakes[i].style.left = (_snowflakes[i].offsetLeft+1) + "px"; // add 1
                 else 
                    _snowflakes[i].style.left = (_snowflakes[i].offsetLeft-1) + "px"; // sub 1
                
            
            requestAnimationFrame(move); // schedule next run of this function
        
    

 
startSnow(); // Need to start it!
#background  width: 800px; height: 800px 
.snowflake  position: absolute; font-size: 40px 
<div id="background">
</div>

以上是关于我陷入了有关javascript中的雪动画的项目中的主要内容,如果未能解决你的问题,请参考以下文章

Ios开发中的定时动画

Javascript - 以与摆动路径在后效中的工作方式相同的方式以编程方式为形状设置动画

Safari 中的 JavaScript 动画

javascript文档准备功能

Javascript 默认是同步(阻塞)还是异步(非阻塞)

在给定时间后停止HTML5 Javascript动画