Shulou(Shulou.com)06/01 Report--

This article is about how html5 can achieve the dazzling effect of meteor shower. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The code is as follows:

/ * *

* Smearing

* @ param $object add trailing objects

, /

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)

}

Code listing 1

Let me explain it word for word.

The first line of code will not be explained, and IT people on Earth all know it. So start with the second line.

First of all, let's inherit this class from LSprite with base, such as listing 2 (as for what base and LSprite are, check out the API documentation, or see my previous article).

The code is as follows:

Base (self,LSprite, [])

Code listing 2

Next, we add a layer to add trailing. As shown in listing 3

The code is as follows:

Self.smearingSprite = new LSprite ()

Self.addChild (self.smearingSprite)

Listing 3

Then we save the object that adds the trailing effect so that it can be used later. As shown in listing 4

The code is as follows:

Self.object = $object

Listing 4

Then add the layer where you want to add the trailing effect object and display it. As shown in listing 5

The code is as follows:

Self.originalSprite = new LSprite ()

Self.addChild (self.originalSprite)

Self.originalSprite.addChild (self.object)

Listing 5

Finally, add a timeline event to make it easy to add trails.

The code is as follows:

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

Code listing 6

At this point, the Smearing constructor is finished and explained. If you don't understand, it may be that you don't know lufylegend, and the addChild,LSprite in it is encapsulated in lufylegend.

We have added timeline events to the above code. Why join? Because I might as well talk about the principle of trailing. Trailing is actually constantly cloning the original object and putting it in its present position, which is equivalent to constantly stamping the picture. When the original object is moved away, the cloned object is not moved, but the original object is moved away. If we add a lot of objects, it will form a line linking the original object. At this point, we iterate through each member of the line and slowly change the transparency of the current object. Then determine whether the transparency of the object is 0, and if so, remove it to avoid taking up too much space. Therefore, we add timeline events to keep adding trailing objects.

The Smearing member function smeared does this, with the following code:

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)

}

});

}

}

Code listing 7

The code is executed according to the principle I mentioned above. You can see that we trailed the members of the trailing layer at the end, then changed the transparency of the traversed object, and removed ourselves at the end of the ease. Among them, the slow class uses the encapsulated LTweenLite in lufylegend, which can be written in detail in the API document.

Mainly the above two lines of code, such as listing 8:

Var smearingChild = new SmearingChild (self.originalSprite,self.object)

Self.smearingSprite.addChild (smearingChild)

Code listing 8

You can see that another class called SmearingChild is used, which is the legendary trailing class. This class can not be ignored, although the code is very small, but very important, the code in it is like listing 9:

/ * *

* SmearingChild

* @ param $parent determines the object of the trailing position

* @ param $object objects to which you want to add a trailing effect

, /

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

}

Listing 9

The above class is instantiated with two parameters, the first to determine the trailing position, and the second to determine the original object. First of all, let's explain what "used to determine the trailing position" means. In fact, the movement of our object is not to let the whole Smearing object move, but to let the originalSprite object in it move, so don't do the smearingSprite thing, why is it designed in this way? In fact, there is a reason (nonsense, please ignore), the reason is that if the coordinates of our trailing are set to the coordinates of the entire Smearing object, then the objects added to smearingSprite will move with it, and the trailing will be misplaced, thus not achieving the effect. So I took the above approach: instead of moving itself, I moved the originalSprite. Therefore, we want to transfer the data from originalSprite to SmearingChild, so we get it through $parent.

After talking about it, everyone should have understood something. After the release of the code, you can take it down to study, or ask questions at the bottom of the article, or use Sina Weibo @ Yorhom, or use email address: wangyuehao1999@gmail.com. (there are many contact information (^ o ^))

The Smearing class still lacks a function, that is, to make the object move slowly, and it is easy to implement. Add the to function:

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

Var self = this

$vars.onComplete = function () {

Self.mode = "complete"

}

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

}

Listing 10

The first parameter is the execution time of the move; the second parameter is the data that executes the buffer, which is the same as the last parameter of the LTweenLite.to method, just refer to the API document. It is worth noting, however, that for ease of operation, we changed the object's mode property to "complete" at the end of the move. This is done so that people can decide whether to do something else based on the value of the mode property, such as removing the object or moving it somewhere else.

When the class Smearing is encapsulated, it is easy to use, as follows:

Init (10, "mylegend", 500, 400, main)

Var back

Function main () {

LStage.setDebug (true)

Back = new LSprite ()

Back.graphics.drawRect (0, "", [0pm 0je 50je 50], true, "blue")

Smearing = new Smearing (back,50)

Smearing.to (2, {

X: 200

Y: 200

});

AddChild (smearing)

}

Third, the dazzling effect of meteor shower

With the class Smearing, our meteor shower is much simpler. First of all, show all the code:

Init (10, "mylegend", 500, 400, main)

Var backLayer,meteorLayer

Var back,meteor

Var maxFrame = 40JI indexFrame = 0

Function main () {

LStage.setDebug (true)

/ / add the backplane layer

BackLayer = new LSprite ()

AddChild (backLayer)

/ / join the meteor layer

MeteorLayer = new LSprite ()

AddChild (meteorLayer)

/ / draw a black rectangle as the background

Back = new LGraphics ()

Back.drawRect (0, "", [0pr 0pr LStage.widthje LStage.height], true, "black")

BackLayer.addChild (back)

/ / draw a yellow rectangle as a meteor

Meteor = new LSprite ()

Meteor.graphics.drawRect (0, "", [0pm 0je 10je 10], true, "yellow")

BackLayer.addEventListener (LEvent.ENTER_FRAME,onframe)

}

Function onframe () {

If (indexFrame > maxFrame) {

IndexFrame = 0

/ / add a trail for each meteor

Var smearing = new Smearing (meteor,50)

Smearing.x = Math.floor (Math.random () * 250)

Smearing.y = 0

Smearing.to (2, {

X: Math.floor (Math.random () *)

Y: 400

});

MeteorLayer.addChild (smearing)

}

For (var key in meteorLayer.childList) {

If (metered Layer.childList [key] .mode = = "complete") {

MeteorLayer.removeChild (mega Layer.childList [key])

}

}

IndexFrame + +

}

Thank you for reading! This is the end of the article on "how to achieve the dazzling meteor shower effect of html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.