Laya animation, animated FIG whole, FIG animation sequence, an animation timeline, animation keel

Animation sequence diagram

FIG Egret animation sequence, using TexureMerger graph, and then use the playback MovieClip class.

Laya words, using packaging tools portfolio graph, and then use the playback Animation classes.

A bubble explosion sequence diagram

 

 

 

laya top right, select Tools, Atlas pack.

 

 

 

Select a movie of the parent folder, select the suffix atlas, click OK.

 

 

 

And pao0.png package generated pao0.atlas

 

 

 

 

 

The animation files atlas and png into laya project assets / anim folder, and load used in your code

pao0 public: Laya.Animation; 

onEnable () { 
    // load an animated resource 
    this.pao0 new new Laya.Animation = (); 
    this.pao0.loadAtlas ( "Anim / pao0.atlas", Laya.Handler.create (the this, the this .onAnimLoaded)); 
} 

Private onAnimLoaded () { 
    // animation loop 
    Laya.stage.addChild (this.pao0); 
    this.pao0.play (0, to true, ""); 
}

 

actual effect　　

 

Animation module plays through animation

Egret in the case, this type of demand is also TextureMerger to achieve.

laya encapsulated in the class tool.

For example, a character animation, there are standing, running animation, attack, death, etc., then packaged into a portfolio where once only play one animation.

We are here to represent or use bubble, bubble are two animations, a blue explosion, a yellow explosion.

 

 

 

Bubble packed into a two atlases

 

 

 Use code

pao0 public: Laya.Animation; 

onEnable () { 
    this.pao0 new new Laya.Animation = (); 
    this.pao0.loadAtlas ( "Anim / pao0.atlas", Laya.Handler.create (the this, this.onAnimLoaded)); 
} 

Private onAnimLoaded () { 
    Laya.stage.addChild (this.pao0); 
    // create an animation template 
    Laya.Animation.createFrames (this.aniUrls ( "Blue", 5), "Blue"); 
    Laya.Animation.createFrames ( this.aniUrls ( "yellow", 5), "yellow"); 
    // play yellow bubble explosion 
    this.pao0.play (0, to true, "yellow"); 
} 

// get the address of an array of animated images 
private aniUrls ( aniName: String, length: Number): the any { 
    var URLs: the any = []; 
    for (var I: Number = 0; I <length; I ++) {  
        // animation path to the resource and the resource name before packaging animation portfolio correspondence
        urls.push ( "Anim /"+ aniName+i+".png");
    }
    return urls;
}

　　

Error, can not be loaded. FML, tutorials laya is wrong? ? According to the error message aniUrls is to load a single image, rather than looking for this picture in the collection.

 

I altas collection deleted, then the sequence diagram scattered into anim folder

 

 

Run, the effect is as follows.

 

Since it is a single load can be used. That said, more laya tutorial animation sequence diagram synthesis of a collection, reduce loading times are swollen fat thing.

https://ldc2.layabox.com/doc/?nav=zh-ts-1-5-0

 

 

 

Figure entire animation

egret and laya did not play the whole map animation. If you need to play the whole map animation, we need to implement.

For example, I can play in the implementation egret sequence diagrams and animation tools like the entire map 

https://www.cnblogs.com/gamedaybyday/p/9219954.html