Write html5 using the syntax similar to ActionScript -- Article 2: Use Sprite to implement animation

Source: Internet
Author: User

 

In the previous article, I copied the as, added the LBitmap and LBitmapData classes, and used them to display static images.

This time, Sprite is used to dynamically display images.

Add the LSprite class and append the show method as follows:

 

Function LSprite (){

Var self = this;

Self. type = "LSprite ";

Self. x = 0;

Self. y = 0;

Self. visible = true;

Self. childList = new Array ()

}

LSprite. prototype = {

Show: function (cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (! Self. visible) return;

LGlobal. show (self. childList, {x: self. x + cood. x, y: self. y + cood. y });

},

AddChild: function (DisplayObject ){

Var self = this;

Self. childList. push (DisplayObject );

}

}

 

 

Because Sprite can have images and other display objects, I added childList in its constructor to save all objects above it. Then, when calling its own show method, It loops its LGlobal into its sub-object.

In this way, we can use Sprite to display the image code in the previous article. The Code is as follows:

 

Function main (){

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadBitmapdata );

Loader. load ("1.png"," bitmapData ");

}

Function loadBitmapdata (event ){

Var bitmapdata = new LBitmapData (loader. content );

Var mapimg = new LBitmap (bitmapdata );

Var backLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

}

 

 

We know that Sprite in actionscript can be used to add EnterFrame events to dynamically display images. I will also imitate them here, because the show method in the LSprite class is continuously circulating, I only need to call a method continuously in the show method to make it loop.

I suppose there is an array that stores all the methods that are continuously looping, and then I can loop through this array in the show method, so as to achieve the loop of all methods. Let's look at the following:

 

Function LSprite (){

Var self = this;

Self. type = "LSprite ";

Self. x = 0;

Self. y = 0;

Self. visible = true;

Self. childList = new Array ()

Self. frameList = new Array ();

}

LSprite. prototype = {

Show: function (cood ){

If (cood = null) cood = {x: 0, y: 0 };

Var self = this;

If (! Self. visible) return;

LGlobal. show (self. childList, {x: self. x + cood. x, y: self. y + cood. y });

Self. loopframe ();

},

Loopframe: function (){

Var self = this;

Var key;

For (key in self. frameList ){

Self. frameList [key] ();

}

},

AddChild: function (DisplayObject ){

Var self = this;

Self. childList. push (DisplayObject );

}

}

 

 

We need to add a method to add this cyclic event. Therefore, we also need the addEventListener method and the removeEventListener method to remove this event.

 

AddEventListener: function (type, listener ){

Var self = this;

If (type = LEvent. ENTER_FRAME ){

Self. frameList. push (listener );

}

},

RemoveEventListener: function (type, listener ){

Var self = this;

Var I, length = self. frameList. length;

For (I = 0; I <length; I ++ ){

If (type = LEvent. ENTER_FRAME ){

Self. frameList. splice (I, 1 );

Break;

}

}

}

 

 

All the added items are added. Next, we will simply implement a walking chart of a person.

First, add several methods to the BitmapData class to change the regional position of the image.

 

LBitmapData. prototype = {

SetProperties: function (x, y, width, height ){

Var self = this;

Self. x = x;

Self. y = y;

Self. width = width;

Self. height = height;

},

SetCoordinate: function (x, y ){

Var self = this;

Self. x = x;

Self. y = y;

}

}

 

 

Now, prepare a walking chart for the character. This will make it work.

 

Var list = new Array ();

Var index = 0;

Var mapimg;

Var loader

Var imageArray;

Var animeIndex = 0;

Var dirindex = 0;

Var dirarr = new Array ({x: 0, y: 1}, {x:-1, y: 0}, {x: 1, y: 0}, {x: 0, y:-1 });

Function main (){

Loader = new LLoader ();

Loader. addEventListener (LEvent. COMPLETE, loadBitmapdata );

Loader. load ("1.png"," bitmapData ");

}

Function loadBitmapdata (event ){

Var bitmapdata = new LBitmapData (loader. content );

ImageArray = LGlobal. divideCoordinate (bitmapdata. image. width, bitmapdata. image. height, 8, 8 );

Mapimg = new LBitmap (bitmapdata );

Mapimg. x = 100;

Mapimg. bitmapData. setCoordinate (0, 0 );

Index = 0;

Var backLayer = new LSprite ();

AddChild (backLayer );

BackLayer. addChild (mapimg );

BackLayer. addEventListener (LEvent. ENTER_FRAME, onframe)

}

 

 

Function onframe (){

Index ++;

If (index> = imageArray [0]. length ){

Index = 0;

}

Mapimg. bitmapData. setCoordinate (imageArray [dirindex] [index]. x, imageArray [dirindex] [index]. y );

Mapimg. x + = dirarr [dirindex]. x * 3;

Mapimg. y + = dirarr [dirindex]. y * 3;

If (animeIndex ++> 20 ){

Dirindex ++;

If (dirindex> 3) dirindex = 0;

AnimeIndex = 0;

}

}

 

 

 

 

See the following url for the effect. If the effect is not displayed, download the html5-supported browser.

Http://fsanguo.comoj.com/html5/jstoas01/index.html

If the source code is used, you can view it in a browser. Everyone on Earth knows it.


From lufy hut

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.