骨骼动画（Spine）

骨骼动画是指使用骨骼系统和动画系统来创建和播放动画的技术。它通常用于工程和动画应用中，用于创建复杂的角色动画和场景动画。 我们的骨骼动画需要使用Spine编辑器4.0.0来创建，

1、骨骼动画组件

this.spine = new LM.Spine();
this.addChild(this.spine);
this.spine.setSpine(
    ["Graphics/Spine/测试骨骼动画.png"],
     "Graphics/Spine/测试骨骼动画.json",
     "Graphics/Spine/测试骨骼动画.atlas",
)
this.spine.setActionList([
    {
      "name": "动作1",
      "action_type": 1
    }
])
this.spine.actionLoop = false;
this.spine.visible = true
this.spine.x = 0
this.spine.y = 0
this.spine.scaleX = 1
this.spine.scaleY = 1

2、常用属性

属性	解释	值	默认值
x	x	数值	0
y	y	数值	0
z	图层高度，越高越靠上层	数值	0
width	宽，图片超出范围会显示不完整	数值，不填为自适应
height	高，图片超出范围会显示不完整	数值，不填为自适应
backgroundColor	背景色	字符串，填色号如红色“#FF0000”
visible	是否可见	布尔值，true可见，false不可见	true
alpha	不透明度	数值，0~255，255表示完全不透明	255
touchEnabled	是否可点击	布尔值，true可点击，false不可点击	true
alphaHitUnable	透明区域是否可点击	布尔值，true可点击，false不可点击	true
isPenetrable	是否可以穿透（点击到下层组件）	布尔值，true可穿透，false不可穿透	true
isMirrored	是否镜像	布尔值，true镜像，false不镜像	false
scaleX	宽缩放率	数值，1原图大小的宽	1
scaleY	高缩放率	数值，1原图大小的高	1
zoomCenterX	缩放中心x（相对于自身）	数值，0.5为自身X轴中点	0
zoomCenterY	缩放中心y（相对于自身）	数值，0.5为自身Y轴中点	0
rotate	旋转角度	数值，角度，正数顺时针，负数逆时针	0
rotateCenterX	旋转中心x（相对于自身）	数值，0.5为自身X轴中点	0
rotateCenterY	旋转中心y（相对于自身）	数值，0.5为自身Y轴中点	0
skin	皮肤	字符串
actionLoop	是否循环播放	布尔值	false
playbackRate	播放速率	数值，1为标准速率	1

其他属性见文档

3、常用方法

（1）onClick

点击行为

（2）onTouchDown

按下行为

（3）onTouchUp

抬起行为

（4）onTouchMove

鼠标在组件区域内移动（可用作悬浮）

（5）onTouchCancel

鼠标移出组件区域（可用作离开悬浮）

let spine = new LM.Spine()
// 注册了点击事件
spine.onClick(()=>{console.log("点击了控件")})
// 注册了按下事件
spine.onTouchDown(()=>{console.log("按下")})
// 注册了抬起事件
spine.onTouchUp(()=>{console.log("抬起")})
// 注册了移动事件
spine.onTouchMove(()=>{console.log("移动了")})
// 注册了移出事件
spine.onTouchCancel(()=>{console.log("移出")})

（6）setSpine

设置骨骼动画数据

（7）setActionList

设置动作列表

this.spine = new LM.Spine();
this.addChild(this.spine);
this.spine.setSpine(
    ["Graphics/Spine/测试骨骼动画.png"],
     "Graphics/Spine/测试骨骼动画.json",
     "Graphics/Spine/测试骨骼动画.atlas",
)
this.spine.setActionList([
    {
      "name": "动作1",
      "action_type": 1
    }
])