<font color="puple">准备工作</font>:
需要导入laya.spine.js
、spine-core-X.X.js
两个类库
资源文件都放在同一文件夹下
资源文件存放示例.png
<font color="red">PS</font>:注意Laya.Spine
相关的类是否存在,没有则需要替换LayaAir.d.ts
<font color="puple">代码实现</font>:
//保存文件路径
private aniPath:string = "../laya/assets/res/animation/spineboy-pma.skel";
private template :Laya.SpineTempletBinary;
private skeleton:Laya.SpineSkeleton;
//用于记录动画动作
private index: number = -1;
//创建新的动画模板
this.template = new Laya.SpineTempletBinary();
//加载动画文件
this.template.loadAni(this.aniPath);
//将动画文件在舞台上播放
this.template.on(Laya.Event.COMPLETE,this,()=>{
this.skeleton = this.template.buildArmature();
//在舞台上加入
Laya.stage.addChild(this.skeleton);
this.skeleton.pos(Laya.Browser.width/3,Laya.Browser.height/2 + 50);
//动画大小缩放
this.skeleton.scale(0.5,0.5);
this.skeleton.on(Laya.Event.STOPPED, this, this.play)
this.play();
});
private play(): void {
console.log(`动作切换${this.index}`);
//循环所有动作index并依次播放,getAnimNum()为得到动画的数量
if(++this.index >= this.skeleton.getAnimNum()) {
this.index = 0
}
this.skeleton.play(this.index, false);
}
<font color="red">PS</font>:无法通过修改容器大小的方式修改其中动画大小,只能通过动画缩放