JS实现飞雪飘飘的效果

       在网站或者游戏开发中，我们常常需要实现飞雪漫天，细雨绵绵，蝴蝶纷飞等效果。这些效果有个共同之处就是随机性很大，是一种整体呈一种趋势的动画效果。JS中的Math.random()方法为我们提供了随机功能，setInterval()方法为我们提供了短周期调用的功能，利用这两个方法我们就可以实现这种群体性的动画效果，如下图的飞雪效果（虽然有些粗糙，但是基本原理相似）。

      

       第一步：建立动态元素库，如雪花，雨滴，蝴蝶等。

var img = {
    1:"<img src='image/snow1.png'/>",
    2:"<img src='image/snow2.png'/>",
    3:"<img src='image/snow3.png'/>"
}


      上面的代码中，我们选择了三张不同的雪花图片，为透明的png格式，同时统一其大小。

      第二步：实现掉雪花的方法，即我们在<body>标签中插入一片雪花，让其按照一定轨迹运动，并最终删除。

function loseSnow(){var posx = parseInt(1366*Math.random());   //产生一个1-1366的随机数，即浏览器宽的随机一个位置
    var posx2 = parseInt(1366*Math.random());
    var img_index = parseInt(3*Math.random())+1;  //产生一个1-3的随机数，用来从img对象中取一个雪花,因为图片命名已经方便使用，故可以不使用img对象
    //产生一个img标签，使其初始位置为屏幕顶端的一个随机点
    var img = $("<img src='image/snow"+img_index+".png' style='width:40px;height:40px;position:absolute;top:0px;left:"+posx+"'/>");$("body").append(img);
    img.animate({ top: "800px",left:posx2}, 10000);  //img的轨迹是从1366中的一个位置到另一个位置，但垂直方向向下
    setTimeout(function(){  //并在10秒后删除该雪花释放内存
	img.remove();
    },10000);
}

       上面方法从浏览器顶部的一个随机位置产生一片雪花，并向下掉落到距浏览器顶部800像素的另一个随机位置，并最终删除释放内存。

       最后一步很简单，我们通过周期调用上面的方法开始下起漫天的大雪。

setInterval(function(){  //每隔2毫秒产生一个雪花
    loseSnow();
},2);

       本例向大家分享了特效的基本原理，图例效果也比较差。但是JS的动画原理都是万变不离其中。而且JS的动画相对比较耗费设备的资源，特别是在手机端。目前在特效制作上建议尽可能使用CSS3的动画功能，以提高程序效率。

 

posted @ 2013-05-28 23:44  javawebsoa  Views(397)  Comments(0)    收藏  举报