Layaair Animation (animation basics)

A: Prepare the material

Place the footage in the Laya/assets directory. I create a new animation folder dedicated to animating footage. As shown in:

Second: Start making animations

Ⅰ, graphicanimation Animation
① Right click Scenes-New animation, open New dialog box

② set the animation type to Graphicanimation, named Boy, as shown in:

③ Click Confirm to generate the Boy.ani file in scenes, I put it into the animation folder. Start the animation editing mode on the timeline so you can edit the animation. As shown in:

④ the animated name of the modified animation is: demo, as shown in:

⑤ Drag the Boy resource folder onto the timeline to make a frame-wise animation and redefine the x, Y value in the first frame to ensure that the center of the animation is at the foot of the boy, as shown in:

⑥ Export Animation resources (in the form of an Atlas): as shown in:

Animated files are generated under Bin/res/atlas/animation (this Laya folder has a corresponding relationship):

Three: Show animation (TS code)

① Core:

        This.boy = new Laya.animation ();        This.boy.loadAtlas ("Res/atlas/animation/boy.atlas", Laya.Handler.create (This,this.showboy));            Laya.loader.load ("Res/atlas/animation/boy.atlas", Laya.Handler.create (This,this.showboy),        NULL, Laya.Loader.ATLAS);                Private Showboy (): void{Laya.stage.addChild (This.boy);                this.boy.x = 100;                THIS.BOY.Y = 100;                This.boy.loadAnimation ("Animation/boy.ani");             Let $event: laya.event = new Laya.event ();                $event. Type = Laya.Event.COMPLETE;                This.boy.on (Laya.Event.COMPLETE, this, This.eventhandler, [$event]);        This.boy.play (0,true, "demo"); } Private EventHandler ($e: laya.event): void{switch ($e. Type) {case La Ya.                        Event.COMPLETE:console.log (' Boy animation finished '); Break; }        }

Results:

② extension
1 ' Add label label:

2 ' Code

        $event.type = Laya.Event.LABEL;        this.boy.on( Laya.Event.LABEL , this , this.eventHandler,[$event]);        private eventHandler( $e : Laya.Event , $value? : any) : void{            switch($e.type){                case Laya.Event.COMPLETE:                console.log(`boy 动画播放完毕`);                break;                case Laya.Event.LABEL:                console.log(`Lab : ${$value}`);                break;            }    }

Results:

~ ~ ~ Animated Display::::

Layaair Animation (animation basics)