這篇文章給大家分享的是有關(guān)html5如何實(shí)現(xiàn)炫麗的流星雨效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)為企業(yè)提供：品牌網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷策劃、微信小程序、營(yíng)銷型網(wǎng)站建設(shè)和網(wǎng)站運(yùn)營(yíng)托管，一站式網(wǎng)絡(luò)營(yíng)銷整體服務(wù)。實(shí)現(xiàn)不斷獲取潛在客戶之核心目標(biāo)，建立了企業(yè)專屬的“全網(wǎng)營(yíng)銷推廣”，就用不著再為了獲取潛在客戶而苦惱，相反，客戶會(huì)主動(dòng)找您，生意就找上門來(lái)了！

代碼如下:

/**

* Smearing

* @param $object 添加拖尾的對(duì)象

*/

function Smearing($object){

var self = this;

base(self,LSprite,[]);

self.x = 0;

self.y = 0;

self.mode = "";

self.smearingSprite = new LSprite();

self.addChild(self.smearingSprite);

self.object = $object;

self.originalSprite = new LSprite();

self.addChild(self.originalSprite);

self.originalSprite.addChild(self.object);

self.addEventListener(LEvent.ENTER_FRAME,self.smeared);

}

代碼清單1

接下來(lái)由我逐字逐句地解釋一番。

第一行代碼就不講解了，地球上的IT人都知道。因此從第二行開(kāi)始說(shuō)起。

首先我們將這個(gè)類用base繼承自LSprite，如代碼清單2（至于base和LSprite是什么，可以到API文檔里去看看，或者看看我以前的文章）。

代碼如下:

base(self,LSprite,[]);

代碼清單2

接下來(lái)，我們加入一個(gè)用來(lái)添加拖尾的層。如代碼清單3

代碼如下:

self.smearingSprite = new LSprite();

self.addChild(self.smearingSprite);

代碼清單3

然后我們保存一下添加拖尾效果的對(duì)象，這樣方便以后使用。如代碼清單4所示

代碼如下:

self.object = $object;

代碼清單4

然后添加放置要添加拖尾效果對(duì)象的層，并將它顯示出來(lái)。如代碼清單5

代碼如下:

self.originalSprite = new LSprite();

self.addChild(self.originalSprite);

self.originalSprite.addChild(self.object);

代碼清單5

最后添加一個(gè)時(shí)間軸事件，方便添加拖尾。

代碼如下:

self.addEventListener(LEvent.ENTER_FRAME,self.smeared);

代碼清單6

到這里，Smearing構(gòu)造器就寫完了，也解釋完了，看不懂的話可能是你不了解lufylegend，里面的addChild，LSprite都是lufylegend中封裝的。

我們?cè)谏厦娴拇a中已經(jīng)加入了時(shí)間軸事件。為什么要加入呢？因?yàn)槲也环琳f(shuō)一下拖尾的原理。拖尾其實(shí)就是不斷地將原對(duì)象克隆出來(lái)，然后放在現(xiàn)在所在的位置上，相當(dāng)于不斷地向畫面上蓋章。當(dāng)原對(duì)象移開(kāi)時(shí)，我們克隆的對(duì)象并沒(méi)有移開(kāi)，而原對(duì)象移開(kāi)了，如果我們?cè)黾拥膶?duì)象有很多，那就會(huì)形成一條鏈接原對(duì)象的線。這時(shí)我們?cè)俦闅v一下這個(gè)線里的每個(gè)成員，通過(guò)緩動(dòng)來(lái)改變當(dāng)前對(duì)象的透明度。然后判斷該對(duì)象的透明度是否為0，如果是就移除，避免占太多空間。因此，我們添加時(shí)間軸事件用來(lái)不斷添加拖尾對(duì)象。

Smearing成員函數(shù)smeared起到這點(diǎn)作用，代碼如下：

Smearing.prototype.smeared = function(self){

var smearingChild = new SmearingChild(self.originalSprite,self.object);

self.smearingSprite.addChild(smearingChild);

for(var key in self.smearingSprite.childList){

LTweenLite.to(self.smearingSprite.childList[key],0.5,{

alpha: 0,

onComplete:function(o){

self.smearingSprite.removeChild(o);

}

});

}

};

代碼清單7

這些代碼按照我在上面所說(shuō)的原理執(zhí)行。可以看到我們?cè)谧詈蟊闅v了拖尾層的成員，然后改變遍歷到的對(duì)象的透明度，并且在緩動(dòng)結(jié)束后移除自身。其中的緩動(dòng)類用的是lufylegend中封裝好了的LTweenLite，可以去API文檔里看看，寫得很詳細(xì)。

主要是上面兩行代碼，如代碼清單8：

var smearingChild = new SmearingChild(self.originalSprite,self.object);

self.smearingSprite.addChild(smearingChild);

代碼清單8

可以看到又用到了一個(gè)名為SmearingChild的類，這個(gè)便是傳說(shuō)中的拖尾類。這個(gè)類不容忽視，雖然代碼很少，但是很重要，里面的代碼如代碼清單9：

/**

* SmearingChild

* @param $parent 確定拖尾位置的對(duì)象

* @param $object 要添加拖尾效果的對(duì)象

*/

function SmearingChild($parent,$object){

var self = this;

base(self,LSprite,[]);

self.addChild($object);

self.x = $parent.x;

self.y = $parent.y;

self.alpha = 0.8;

}

代碼清單9

以上的類實(shí)例化時(shí)有兩個(gè)參數(shù)，第一個(gè)用來(lái)確定這個(gè)拖尾位置的，第二個(gè)是原對(duì)象。首先來(lái)解釋一下“用來(lái)確定這個(gè)拖尾位置的”是神馬意思，其實(shí)我們對(duì)象的移動(dòng)，不是讓整個(gè)Smearing對(duì)象移動(dòng)，而是讓他里面的originalSprite對(duì)象移動(dòng)，所以不干smearingSprite的事，為什么這樣設(shè)計(jì)呢？其實(shí)是有原因的（廢話，請(qǐng)忽略），原因所在就是，如果我們的拖尾的坐標(biāo)設(shè)置為整個(gè)Smearing對(duì)象的坐標(biāo)位置，那加到smearingSprite的對(duì)象也會(huì)跟著移動(dòng)，拖尾就會(huì)錯(cuò)位，從而達(dá)不到效果。所以我采取了以上的辦法：不移動(dòng)本身，而是移動(dòng)originalSprite。因此，我們要把originalSprite的數(shù)據(jù)傳到SmearingChild中，因此就通過(guò)$parent來(lái)獲取。

講了一通，大伙應(yīng)該也明白了些。后面放出代碼，大家可以拿下去研究，或者在文章下方提出問(wèn)題或者用新浪微博@Yorhom，還可以用郵箱，郵箱地址：wangyuehao1999@gmail.com。（聯(lián)系方式多多啊 (^o^)）

Smearing這個(gè)類還差個(gè)功能，那就是讓對(duì)象緩緩移動(dòng)，實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，加入to函數(shù)：

Smearing.prototype.to = function($duration,$vars){

var self = this;

$vars.onComplete = function(){

self.mode = "complete";

}

LTweenLite.to(self.originalSprite,$duration,$vars);

};

代碼清單10

第一個(gè)參數(shù)是移動(dòng)執(zhí)行的時(shí)間；第二個(gè)參數(shù)是執(zhí)行緩動(dòng)的數(shù)據(jù)，和LTweenLite.to方法最后一個(gè)參數(shù)是一樣的，參照API文檔即可。不過(guò)值得注意的是，為了方便操作，我們?cè)谝苿?dòng)結(jié)束時(shí)，將該對(duì)象的mode屬性改為“complete”。這樣做是為了讓大家根據(jù)mode屬性的值來(lái)決定是否作出其他的操作，比如移除該對(duì)象，或者往其他地方移動(dòng)。

Smearing這個(gè)類封裝好了，使用起來(lái)就簡(jiǎn)單了，如下：

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);

}

三，炫麗的流星雨效果

有了，Smearing這個(gè)類，我們的流星雨就簡(jiǎn)單多了。首先把所有代碼展示一下：

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);

//畫一個(gè)黑色矩形作為背景

back = new LGraphics();

back.drawRect(0,"",[0,0,LStage.width,LStage.height],true,"black");

backLayer.addChild(back);

//畫一個(gè)黃色矩形作為一顆流星

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;

//為每個(gè)流星添加一個(gè)拖尾

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),

y: 400

});

meteorLayer.addChild(smearing);

}

for(var key in meteorLayer.childList){

if(meteorLayer.childList[key].mode == "complete"){

meteorLayer.removeChild(meteorLayer.childList[key]);

}

}

indexFrame ++;

}

感謝各位的閱讀！關(guān)于“html5如何實(shí)現(xiàn)炫麗的流星雨效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！