Layaair DragonBones 龙骨动画的播放

本文要点：

龙骨动画的导入
龙骨动画的播放控制
龙骨动画的事件机制

官方文档入口

本节大概效果

龙骨动画的导入:

Layair 导入龙骨动画：

一般导入到 Bin 目录的 Src目录里面，在这里我创建了一个hero的目录

龙骨动画的加载和播放控制

这是一个循环播放动画的例子

//这是一个 循环播放动画的例子let templetStone: Laya.Templet = new Laya.Templet();
templetStone.on(Laya.Event.COMPLETE, this, () => {//创建第一个动画var skeleton: Laya.Skeleton;//从动画模板创建动画播放对象skeleton = templetStone.buildArmature(0);skeleton.pos(128, 665);//切换动画皮肤 使用标号为0的皮肤skeleton.showSkinByIndex(0);//播放skeleton.play(0, true);this.addChild(skeleton);
});
templetStone.loadAni("res/anima/stone/钱袋动画.sk");

这是一个有两段动画的例子，主角的空闲时动画和一个触发动画

//Hero动画
this.templetHero = new Laya.Templet();
this.templetHero.on(Laya.Event.COMPLETE, this, () => {//创建第一个动画// var skeleton: Laya.Skeleton;// //从动画模板创建动画播放对象this.skeletonHero = this.templetHero.buildArmature(0);this.skeletonHero.pos(350, 620);//切换动画皮肤 使用标号为0的皮肤this.skeletonHero.showSkinByIndex(0);//播放//this.skeletonHero.play(1, true);//动画事件this.skeletonHero.on(Laya.Event.LABEL, this, (event) => {let tEventData: Laya.EventData = event as Laya.EventData;if (tEventData.time > 100) {//console.log("动画事件 触发:", tEventData)Laya.SoundManager.playSound("res/sound/miming.mp3");//播放挖坑声音}});this.skeletonHero.on(Laya.Event.STOPPED, this, () => {this.isDigging = falsethis.ainPlayIdle()// console.log("Laya.Event.STOPPED this.isDigging :", this.isDigging)});this.ainPlayIdle()this.addChild(this.skeletonHero);});
this.templetHero.loadAni("res/anima/hero/矿工once.sk");

这个是播放第一段空闲动画和播放触发动画

// 空闲动画
private ainPlayIdle() {this.skeletonHero.play(1, true);
}
//触发动画
private ainPlayDig() {// if (!this.isDigging) {//     this.isDigging = truethis.skeletonHero.play(0, false);// }
}

龙骨动画的事件机制

在动画播放的时候我们还可以触发事件，比方说我的触发动画里有一个挖矿的动作。我需要在锄头碰到石头的时候播放一个音效。

在龙骨动画制作的时候添加一个事件

这样一来在播放动画的时候就可以触发一个事件

layaair 是通过 Laya.Event.LABEL 来接收事件的

//动画事件
this.skeletonHero.on(Laya.Event.LABEL, this, (event) => {let tEventData: Laya.EventData = event as Laya.EventData;if (tEventData.time > 100) {//console.log("动画事件 触发:", tEventData)Laya.SoundManager.playSound("res/sound/miming.mp3");//播放挖坑声音}
});

有里有另外一个知识点

循环播放

当skeleton.play(0,true)第二个参数为true时，每播放完一遍龙骨动画，会自动触发Event.COMPLET事件
skeleton.player.on(Event.COMPLETE,this,onComplete);

播放一次
当skeleton.play(0,false)第二个参数为false时，当前动画播放完成后，会自动触发Event.STOPED事件，而不是Event.COMPLETE事件
skeleton.on(Event.STOPPED, this, completeHandler);