HTML5梦幻之旅——炫丽的流星雨效果实现过程

2020-04-22 06:52:53易采站长站整理

讲了一通,大伙应该也明白了些。后面放出代码,大家可以拿下去研究,或者在文章下方提出问题或者用新浪微博@Yorhom,还可以用邮箱,邮箱地址:wangyuehao1999@gmail.com。(联系方式多多啊 (^o^))
Smearing这个类还差个功能,那就是让对象缓缓移动,实现起来也很简单,加入to函数:


Smearing.prototype.to = function($duration,$vars){
var self = this;
$vars.onComplete = function(){
self.mode = “complete”;
}
LTweenLite.to(self.originalSprite,$duration,$vars);
};

代码清单10
第一个参数是移动执行的时间;第二个参数是执行缓动的数据,和LTweenLite.to方法最后一个参数是一样的,参照API文档即可。不过值得注意的是,为了方便操作,我们在移动结束时,将该对象的mode属性改为“complete”。这样做是为了让大家根据mode属性的值来决定是否作出其他的操作,比如移除该对象,或者往其他地方移动。
Smearing这个类封装好了,使用起来就简单了,如下:


init(10,”mylegend”,500,400,main);
var back;
function main(){
LStage.setDebug(true);
back = new LSprite();
back.graphics.drawRect(0,””,[0,0,50,50],true,”blue”);
smearing = new Smearing(back,50);
smearing.to(2,{
x: 200,
y: 200
});
addChild(smearing);
}

代码清单11
演示效果图如下:
 
测试连接:http://www.cnblogs.com/yorhom/articles/3237266.html
三,炫丽的流星雨效果
有了,Smearing这个类,我们的流星雨就简单多了。首先把所有代码展示一下:


init(10,”mylegend”,500,400,main);
var backLayer,meteorLayer;
var back,meteor;
var maxFrame = 40,indexFrame = 0;
function main(){
LStage.setDebug(true);
//加入底板层
backLayer = new LSprite();
addChild(backLayer);
//加入流星层
meteorLayer = new LSprite();
addChild(meteorLayer);
//画一个黑色矩形作为背景
back = new LGraphics();
back.drawRect(0,””,[0,0,LStage.width,LStage.height],true,”black”);
backLayer.addChild(back);
//画一个黄色矩形作为一颗流星
meteor = new LSprite();
meteor.graphics.drawRect(0,””,[0,0,10,10],true,”yellow”);
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe(){
if(indexFrame > maxFrame){
indexFrame = 0;
//为每个流星添加一个拖尾
var smearing = new Smearing(meteor,50);
smearing.x = Math.floor(Math.random() * 250);
smearing.y = 0;
smearing.to(2,{
x: Math.floor(Math.random() * (500 – 480) + 480),