首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

『HTML5梦幻之旅』-炫丽的陨石雨效果

2013-10-08 
『HTML5梦幻之旅』-炫丽的流星雨效果流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿

『HTML5梦幻之旅』-炫丽的流星雨效果

流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现。不过流星很少见，至少我没有见到过，因此从来没有对着它许愿。最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果。因此今天就来实现一下，也好让我等没有看到过流星的童鞋长长见识。

先发几个截图吧：

『HTML5梦幻之旅』-炫丽的陨石雨效果

『HTML5梦幻之旅』-炫丽的陨石雨效果

偶美工不好，所以看上去没什么感觉，不过把背景图换一换，就好看了（就是没有找到合适的图片）。

测试链接：http://www.cnblogs.com/yorhom/articles/3237944.html

大家不妨对着流星许个愿吧，说不定愿望能实现呢。『HTML5梦幻之旅』-炫丽的陨石雨效果

?

一，准备工作

?

本次开发需要用到开源引擎lufylegend.js，引擎的下载地址&详细信息如下

引擎官方网站：

http://lufylegend.com/lufylegend

引擎API网站：

http://lufylegend.com/lufylegend/api

?

二，拖尾效果

?

实现流星雨，要用到拖尾效果，但lufylegend中没有添加拖尾的功能，所以只有自己写了，其实实现起来也不难，就是lufy太懒了，没有封装而已（愿lufy不要看到这句话啊……）。今天我就帮他老人家来实现一下这个效果。

拖尾这个效果在游戏中很常见，比如人物移动时的幻影，子弹等。因此我们把它封装为一个Smearing类，这个类主要负责实现拖尾效果。代码如下：

?

[javascript]?view plaincopy?
  1. /**?
  2. *?Smearing?
  3. *?@param?$object?添加拖尾的对象?
  4. */??
  5. function?Smearing($object){??
  6. ????var?self?=?this;??
  7. ????base(self,LSprite,[]);??
  8. ??????
  9. ????self.x?=?0;??
  10. ????self.y?=?0;??
  11. ??????
  12. ????self.mode?=?"";??
  13. ??????
  14. ????self.smearingSprite?=?new?LSprite();??
  15. ????self.addChild(self.smearingSprite);??
  16. ??????
  17. ????self.object?=?$object;??
  18. ??????
  19. ????self.originalSprite?=?new?LSprite();??
  20. ????self.addChild(self.originalSprite);??
  21. ????self.originalSprite.addChild(self.object);??
  22. ??????
  23. ????self.addEventListener(LEvent.ENTER_FRAME,self.smeared);??
  24. }??

代码清单1

接下来由我逐字逐句地解释一番。

第一行代码就不讲解了，地球上的IT人都知道。因此从第二行开始说起。

首先我们将这个类用base继承自LSprite，如代码清单2（至于base和LSprite是什么，可以到API文档里去看看，或者看看我以前的文章）。

?

[javascript]?view plaincopy?
  1. base(self,LSprite,[]);??

?

代码清单2

?

接下来，我们加入一个用来添加拖尾的层。如代码清单3

?

[javascript]?view plaincopy?
  1. self.smearingSprite?=?new?LSprite();??
  2. self.addChild(self.smearingSprite);??

?

代码清单3

然后我们保存一下添加拖尾效果的对象，这样方便以后使用。如代码清单4所示

?

[javascript]?view plaincopy?
  1. self.object?=?$object;??

?

代码清单4

然后添加放置要添加拖尾效果对象的层，并将它显示出来。如代码清单5

?

?

[javascript]?view plaincopy?
  1. self.originalSprite?=?new?LSprite();??
  2. self.addChild(self.originalSprite);??
  3. self.originalSprite.addChild(self.object);??

?

代码清单5

?

最后添加一个时间轴事件，方便添加拖尾。

?

[javascript]?view plaincopy?
  1. self.addEventListener(LEvent.ENTER_FRAME,self.smeared);??

?

代码清单6

?

到这里，Smearing构造器就写完了，也解释完了，看不懂的话可能是你不了解lufylegend，里面的addChild，LSprite都是lufylegend中封装的。

我们在上面的代码中已经加入了时间轴事件。为什么要加入呢？因为我不妨说一下拖尾的原理。拖尾其实就是不断地将原对象克隆出来，然后放在现在所在的位置上，相当于不断地向画面上盖章。当原对象移开时，我们克隆的对象并没有移开，而原对象移开了，如果我们增加的对象有很多，那就会形成一条链接原对象的线。这时我们再遍历一下这个线里的每个成员，通过缓动来改变当前对象的透明度。然后判断该对象的透明度是否为0，如果是就移除，避免占太多空间。因此，我们添加时间轴事件用来不断添加拖尾对象。

Smearing成员函数smeared起到这点作用，代码如下：

?

[javascript]?view plaincopy?
  1. Smearing.prototype.smeared?=?function(self){??????
  2. ????var?smearingChild?=?new?SmearingChild(self.originalSprite,self.object);??
  3. ????self.smearingSprite.addChild(smearingChild);??
  4. ??
  5. ????for(var?key?in?self.smearingSprite.childList){??
  6. ????????LTweenLite.to(self.smearingSprite.childList[key],0.5,{??
  7. ????????????alpha:?0,??
  8. ????????????onComplete:function(o){??
  9. ????????????????self.smearingSprite.removeChild(o);??
  10. ????????????}??
  11. ????????});??
  12. ????}??
  13. };??

?

代码清单7

这些代码按照我在上面所说的原理执行。可以看到我们在最后遍历了拖尾层的成员，然后改变遍历到的对象的透明度，并且在缓动结束后移除自身。其中的缓动类用的是lufylegend中封装好了的LTweenLite，可以去API文档里看看，写得很详细。

?

主要是上面两行代码，如代码清单8：

?

[javascript]?view plaincopy?
  1. var?smearingChild?=?new?SmearingChild(self.originalSprite,self.object);??
  2. self.smearingSprite.addChild(smearingChild);??

?

代码清单8

可以看到又用到了一个名为SmearingChild的类，这个便是传说中的拖尾类。这个类不容忽视，虽然代码很少，但是很重要，里面的代码如代码清单9：

?

?

[javascript]?view plaincopy?
  1. /**?
  2. *?SmearingChild?
  3. *?@param?$parent?确定拖尾位置的对象?
  4. *?@param?$object?要添加拖尾效果的对象?
  5. */??
  6. function?SmearingChild($parent,$object){??
  7. ????var?self?=?this;??
  8. ????base(self,LSprite,[]);???
  9. ??????
  10. ????self.addChild($object);??
  11. ??????
  12. ????self.x?=?$parent.x;??
  13. ????self.y?=?$parent.y;??
  14. ????self.alpha?=?0.8;??
  15. }??

?

代码清单9

以上的类实例化时有两个参数，第一个用来确定这个拖尾位置的，第二个是原对象。首先来解释一下“用来确定这个拖尾位置的”是神马意思，其实我们对象的移动，不是让整个Smearing对象移动，而是让他里面的originalSprite对象移动，所以不干smearingSprite的事，为什么这样设计呢？其实是有原因的（废话，请忽略），原因所在就是，如果我们的拖尾的坐标设置为整个Smearing对象的坐标位置，那加到smearingSprite的对象也会跟着移动，拖尾就会错位，从而达不到效果。所以我采取了以上的办法：不移动本身，而是移动originalSprite。因此，我们要把originalSprite的数据传到SmearingChild中，因此就通过$parent来获取。

?

讲了一通，大伙应该也明白了些。后面放出代码，大家可以拿下去研究，或者在文章下方提出问题或者用新浪微博@Yorhom，还可以用邮箱，邮箱地址：wangyuehao1999@gmail.com。（联系方式多多啊 (^o^)）

Smearing这个类还差个功能，那就是让对象缓缓移动，实现起来也很简单，加入to函数：

?

[javascript]?view plaincopy?
  1. Smearing.prototype.to?=?function($duration,$vars){????
  2. ????var?self?=?this;??
  3. ??????
  4. ????$vars.onComplete?=?function(){??
  5. ????????self.mode?=?"complete";??
  6. ????}??
  7. ????LTweenLite.to(self.originalSprite,$duration,$vars);??
  8. };??

?

代码清单10

第一个参数是移动执行的时间；第二个参数是执行缓动的数据，和LTweenLite.to方法最后一个参数是一样的，参照API文档即可。不过值得注意的是，为了方便操作，我们在移动结束时，将该对象的mode属性改为“complete”。这样做是为了让大家根据mode属性的值来决定是否作出其他的操作，比如移除该对象，或者往其他地方移动。

?

Smearing这个类封装好了，使用起来就简单了，如下：

?

[javascript]?view plaincopy?
  1. init(10,"mylegend",500,400,main);??
  2. var?back;??
  3. function?main(){??
  4. ????LStage.setDebug(true);??
  5. ??????
  6. ????back?=?new?LSprite();??
  7. ????back.graphics.drawRect(0,"",[0,0,50,50],true,"blue");??
  8. ??????
  9. ????smearing?=?new?Smearing(back);??
  10. ????smearing.to(2,{??
  11. ????????x:?200,??
  12. ????????y:?200??
  13. ????});??
  14. ????addChild(smearing);??
  15. }??

?

代码清单11

演示效果图如下：

?

『HTML5梦幻之旅』-炫丽的陨石雨效果

测试链接：http://www.cnblogs.com/yorhom/articles/3237266.html

?

三，炫丽的流星雨效果

?

有了，Smearing这个类，我们的流星雨就简单多了。首先把所有代码展示一下：

?

[javascript]?view plaincopy?
  1. init(10,"mylegend",500,400,main);??
  2. var?backLayer,meteorLayer;??
  3. var?back,meteor;??
  4. var?maxFrame?=?40,indexFrame?=?0;??
  5. function?main(){??
  6. ????LStage.setDebug(true);??
  7. ??????
  8. ????//加入底板层??
  9. ????backLayer?=?new?LSprite();??
  10. ????addChild(backLayer);??
  11. ????//加入流星层??
  12. ????meteorLayer?=?new?LSprite();??
  13. ????addChild(meteorLayer);??
  14. ??????
  15. ????//画一个黑色矩形作为背景??
  16. ????back?=?new?LGraphics();??
  17. ????back.drawRect(0,"",[0,0,LStage.width,LStage.height],true,"black");??
  18. ????backLayer.addChild(back);??
  19. ??????
  20. ????//画一个黄色矩形作为一颗流星??
  21. ????meteor?=?new?LSprite();??
  22. ????meteor.graphics.drawRect(0,"",[0,0,10,10],true,"yellow");??
  23. ??????
  24. ??????
  25. ??????
  26. ????backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);??
  27. }??
  28. function?onframe(){??
  29. ????if(indexFrame?>?maxFrame){??
  30. ????????indexFrame?=?0;??
  31. ????????//为每个流星添加一个拖尾??
  32. ????????var?smearing?=?new?Smearing(meteor,50);??
  33. ????????smearing.x?=?Math.floor(Math.random()?*?250);??
  34. ????????smearing.y?=?0;??
  35. ????????smearing.to(2,{??
  36. ????????????x:?Math.floor(Math.random()?*?(500?-?480)?+?480),??
  37. ????????????y:?400??
  38. ????????});??
  39. ????????meteorLayer.addChild(smearing);??
  40. ????}??
  41. ????for(var?key?in?meteorLayer.childList){??
  42. ????????if(meteorLayer.childList[key].mode?==?"complete"){??
  43. ????????????meteorLayer.removeChild(meteorLayer.childList[key]);??
  44. ????????}??
  45. ????}??
  46. ????indexFrame?++;??
  47. }??

?

代码清单12

每行代码都加入了注释，理解起来一定很简单了。如果实在是理解不到，可能是因为你没有了解lufylegend罢了。可以参照API文档学习一下。

?

?

最后是代码打包，下载地址：http://files.cnblogs.com/yorhom/Smearing.rar

?

本篇文章就到此结束了。文章如有什么地方写得不妥，欢迎提出。另外，如果有任何不解的地方，可以在博客下方留言，我会尽我所能帮你解决。

支持就是最大的鼓励！

读书人精选
热点排行