效果实现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的动画功能,以提高程序效率。

文章结束给大家分享下程序员的一些笑话语录: 程序语言综述
CLIPPER 程序员不去真的猎捕大象,他们只是购买大象部分的库然后花几年的时间试图综合它们。
DBASE 程序员只在夜间猎捕大象,因为那时没人会注意到他们还在使用石弓。
FOXPRO 程序员开始使用更新更好的步枪,这使他们花掉比实际狩猎更多的时间学习新的射击技术。
C 程序员拒绝直接购买步枪,宁可带着钢管和一个移动式机器车间到非洲,意欲从零开始造一枝完美的步枪。
PARADOX 程序员去非洲时带着好莱坞关于猎捕大象的电影剧本,他们认为照剧本行事就会逮到一头大象。
ACCESS 程序员在没有任何猎象经验的经验下就出发了,他们穿着华丽的猎装、带着全部装备,用漂亮的望远镜找到了大象,然后发觉忘了带扳机。
RBASE 程序员比大象还要稀少,事实上,如果一头大象看到了一个RBASE程序员,对他是个幸运日。
VISUAL ACCESS 程序员装上子弹、举起步枪、瞄准大象,这使大象感到可笑,究竟谁逃跑。他们无法抓住大象,因为由于他们对多重控制的偏爱,他们的吉普车有太多的方向盘因而无法驾驶。
ADA、APL和FORTRAN 程序员与圣诞老人和仙女一样是虚构的。
COBOL 程序员对和自己一样濒临灭绝的大象寄予了深切的同情。

--------------------------------- 原创文章 By
效果和实现
---------------------------------

posted @ 2013-05-29 20:22  坚固66  阅读(284)  评论(0编辑  收藏  举报