BK.SkeletonAnimation 骨骼动画

骨骼动画类父类BK.Node手机QQ版本

成员变量

变量 类型 名称 备注
canMixVertexColor boolean 是否启用颜色叠加
timeScale number 播放速率
paused boolean 暂停
accessoryTypes Array 装扮类型数组 手机QQ版本 7.2.5

例子:

  1. var rice =new BK.SkeletonAnimation(atlasPath, jsonPath, 1,null,null,null );
  2. //启动spine动画颜色叠加
  3. rice.canMixVertexColor = true ;
  4. rice.vertexColor = {r:1, g:1, b:1, a:0.5}

方法

构造函数 new BK.SkeletonAnimation(atlasPath, jsonPath, 1,startCB,completeCB,endCB )

加载骨骼
参数 类型 名称 备注
atlasPath string atlas文件路径
jsonPath string json文件路径
timeScale number 播放速率 1为正常速率
startCB function 开始播放事件回调
completeCB function 动画播放完一次
endCB function 动画播放完成,即将播放另外的动画

返回值:

类型 名称 备注
Object 骨骼动画对象

例子:

  1. var jsonPath = BK.Script.pathForResource("GameRes://suit/default/role/role", 'json');
  2. var atlasPath = BK.Script.pathForResource("GameRes://suit/default/role/role", 'atlas');
  3. // animName为动画名,trackId为setAnimation指定的标识符,skeletonAnimation为spine实例
  4. function startCB(animName,trackId,skeletonAnimation)
  5. {
  6. BK.Script.log(0,0,"Start Event Callback");
  7. }
  8. function completeCB(animName,trackId,skeletonAnimation)
  9. {
  10. BK.Script.log(0,0,"Complete Event Callback");
  11. }
  12. function endCB(animName,trackId,skeletonAnimation)
  13. {
  14. BK.Script.log(0,0,"End Event Callback");
  15. }
  16. /**
  17. * 骨骼动画构造函数 (加载骨骼)
  18. * atlasPath altas文件路径
  19. * jsjsonPath json文件路径
  20. * timeScale 播放速率 1为正常速率
  21. * startCB 开始播放事件回调
  22. * completeCB 动画播放完毕
  23. * endCB 动画播放完成,即将播放另外的动画
  24. */
  25. var ani =new BK.SkeletonAnimation(atlasPath, jsonPath, 1,startCB,completeCB,endCB );
  26. ani.position = {x:100,y:100};

setAccessory(jsonPath, atlasPath);

加载装扮
参数 类型 名称 备注
atlasPath string 装扮atlas文件路径
jsonPath string 装扮json文件路径

返回值:无

例子:

  1. //下列例子为加载厘米秀小人的7件装扮
  2. var accArray = ['FaceSuit', 'BackSuit', 'BottomSuit', 'FaceOrnament', 'TopSuit', 'HairType'];
  3. for (var i=0;i<accArray.length;i++)
  4. {
  5. var j = "GameRes://suit/default/" + accArray[i] + "/dress";
  6. var a = "GameRes://suit/default/" + accArray[i] + "/dress";
  7. var jPath = BK.Script.pathForResource(j, 'json');
  8. var aPath = BK.Script.pathForResource(a, 'atlas');
  9. ani.setAccessory(jPath, aPath);
  10. }

removeAccessory(accessoryName);

移除装扮
参数 类型 名称 备注
accessoryName string 待移除的装扮名 json中命名的装扮名

返回值:无

例子:

  1. //移除头饰装扮
  2. ani.removeAccessory("HairType");

setAccessoryWithInfo(jsonPath, atlasPath,content)

加载气泡
参数 类型 名称 备注
jsonPath string 气泡json文件路径
atlasPath string 气泡atlas文件路径
content string 气泡文案

返回值:无

例子:

  1. var bubbleJsonPath = BK.Script.pathForResource("GameRes://bubble/1/dress", 'json');
  2. var bubbleAtlasPath = BK.Script.pathForResource("GameRes://bubble/1/dress", 'atlas');
  3. ani.setAccessoryWithInfo(bubbleJsonPath, bubbleAtlasPath, "你好");

setAccessoryAnimation(jsonPath, atlasPath,animationName)

添加动画 (只添加,未播放)
参数 类型 名称 备注
jsonPath string json文件路径
atlasPath string atlas文件路径
animationName string 动作名 可自定义,用于播放动画

返回值:无

例子:

  1. //添加名为一个动画,并命名为 anim1
  2. var animJson = BK.Script.pathForResource("GameRes://action/crash_action_peer/action", 'json');
  3. var animAtlas = BK.Script.pathForResource("GameRes://action/crash_action_peer/action", 'atlas');
  4. ani.setAccessoryAnimation(animJson, animAtlas, "anim1");

removeAccessoryAnimation(animationName)

移除动画
参数 类型 名称 备注
animationName string 动作名

返回值:无

例子: //移除名为anim1的动画 ani. removeAccessoryAnimation("anim1");

containAnimation(animationName)

查询是否存在动作
参数 类型 名称 备注
animationName string 动作名

返回值:

类型 名称 备注
boolean 是否存在动作

例子:

  1. var isExist = ani.containAnimation("anim1");

setAnimation(track, name, loop)

播放动画
参数 类型 名称 备注
track number 索引id
name string 动画名
loop boolean 是否循环播放

返回值:无

例子:

  1. //播放动画,并传入track 为1,用以表示该次播放
  2. ani.setAnimation(1,"anim1",true)

setStartCallback(func)

设置动画开始时的函数回调
参数 类型 名称 备注
func function 回调函数

返回值:无

例子:

  1. ani.setStartCallback( function (animName,trackId,skeletonAnimation)
  2. {
  3. BK.Script.log(0,0,"Start Event Callback");
  4. });

setCompleteCallback(func)

设置动画播放完一次后 的函数回调
参数 类型 名称 备注
func function 回调函数

返回值:无

例子:

  1. ani.setCompleteCallback( function (animName,trackId,skeletonAnimation)
  2. {
  3. BK.Script.log(0,0,"Complete Event Callback");
  4. });

setEndCallback(func)

设置动画播放完成 即将播放其他动画 的函数回调
参数 类型 名称 备注
func function 回调函数

返回值:无

例子:

  1. ani.setEndCallback(function (animName,trackId,skeletonAnimation)
  2. {
  3. BK.Script.log(0,0,"End Event Callback");
  4. });

update(duration)

设置动画向前播放
参数 类型 名称 备注
duration number 向前更新时间 单位为秒

返回值:无

例子:

  1. //例如整个动画时长为1s,当前已播放0.7秒,调用下方函数则会前进至最后一帧
  2. ani.update(0.3);

getSlotNames()

获取所有slot名字手机QQ版本 7.2.0

参数:无

返回值:

类型 名称 备注
Array 所有slot名字

例子:

  1. //获取slot名字数组
  2. var names = ani.getSlotNames();

getBoneNames()

获取bone名字数组手机QQ版本 7.2.0

参数:无

返回值:

类型 名称 备注
Array 所有bone名字

例子:

  1. //获取bone名字数组
  2. var bones = ani.getBoneNames();

setBoneScale(boneName,scaleX,scaleY)

设置骨骼大小手机QQ版本 7.2.0
参数 类型 名称 备注
boneName string 骨骼名字
scaleX number x方向大小
scaleY number y方向大小

返回值:无

例子:

  1. //例如将右手放大2倍
  2. ani.setBoneScale("Hand_Right",2.0,2.0);

getAttachmentBySlotName(slotName)

根据slot名称获取attachment名称手机QQ版本 7.2.0
参数 类型 名称 备注
slotName string slot名称

返回值:

类型 名称 备注
string attachment名称

例子:

  1. //根据slot获得attachment
  2. var eyeAttMnt = ani.getAttachmentBySlotName("Eyes");

setAttachmentBySlotName(slotName,attachmentName)

设置attachment至对于的slot中注意不可在播放动作时设置attachment,因播放动作过程实际是动态改变各个bone与slot的过程,此时再次修改slot的attachment,会导致动作紊乱。手机QQ版本 7.2.0
参数 类型 名称 备注
slotName string slot名称
attachmentName string attachment的名字 设置为null或undefined时表示去除attachment

返回值:无

例子:

  1. //根据slot名设置attachment,第二个参数赋值undefined、null表示隐藏
  2. ani.setAttachmentBySlotName("Eyes",null);
  3. ani.setAttachmentBySlotName("Eyes",eyeAttMnt);

setBonePosition(boneName,position)

设置骨骼位置手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称
position Object 位置 相对于父骨骼的坐标

返回值:无

例子:

  1. ani.setBonePosition('Upperarm_Left01',{x:100,y:100})

getBonePosition(boneName)

获取骨骼位置手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称

返回值:

类型 名称 备注
Object 位置 相对于父骨骼的坐标

例子:

  1. var pos = ani.getBonePosition("Skirt_Left01");
  2. BK.Script.log(0,0,"x:"+pos.x + " y:"+pos.y);

setBoneScale(boneName,scale)

设置某个骨骼的缩放比手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称
scale Object 缩放比

返回值:无

例子:

  1. //将右手放大2倍
  2. ani.setBoneScale("Hand_Right",{x:posX,y:posY})

getBoneScale(boneName)

获取某个骨骼的缩放比手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称

返回值:

类型 名称 备注
Object 缩放比

例子:

  1. var scale = ani.getBoneScale('Upperarm_Left01');
  2. var scaleX = scale.x;
  3. var scaleY = scale.y;

setBoneRotation(boneName,rotation)

设置骨骼的旋转角度手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称
rotation number 旋转角度

返回值:无

例子:

  1. //将骨骼放大2倍
  2. ani.setBoneScale("Hand_Right",{x:posX,y:posY})

getBoneRotation(boneName)

获取骨骼的旋转角度手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
boneName string 骨骼名称

返回值:

类型 名称 备注
number 旋转角度

例子:

  1. var rotation = ani.getBoneRotation('Upperarm_Left01');

setAccessoryColor(accType,color)

设置某个装扮的颜色手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
accType string 装扮类型 可通过accessoryTypes属性获取
color Object 颜色

返回值:无

例子:

  1. //将厘米秀上衣设置成黄色
  2. ani.setAccessoryColor('TopSuit',{r:1,g:1,b:0,a:1})

hittestAccessory(accType,worldPoint)

判断某件装扮是否被点击手机QQ版本 7.2.5

参数 :

参数 类型 名称 备注
accType string 装扮类型 可通过accessoryTypes属性获取
worldPoint Object 检测点 世界坐标点

返回值:无

例子:

  1. //检测厘米秀小人上衣有无被点击
  2. ani.hittestAccessory('TopSuit',{x:x,y:y})

restoreAnimationState()

将spine动画重置到setup状态使用场景:spine在多个动画进行切换时,由于动画设计的不同,可能会出现上一个动作的残留。此情况下可以使用本接口,将spine切换到初始的setup状态以清除所有的动作残留。
  1. ani.restoreAnimationState()

参数:无

返回值:无

restoreSlotsSetupPos()

将spine的slot重置到setup状态

参数:无

返回值:无

  1. ani.restoreSlotsSetupPos()

restoreBonesSetupPos()

将spine的bone重置到setup状态

参数:无

返回值:无

  1. ani.restoreBonesSetupPos()

参数:无

返回值:无

Q&A

Q:accessory是什么?

A:厘米秀装扮部件。厘米秀的小人由骨骼+7件装扮组合而成。7件装扮分别为'FaceSuit'脸, 'BackSuit'背饰, 'BottomSuit'下装, 'FaceOrnament'脸饰, 'TopSuit'上装, 'HairType'发饰七种装扮。开发者可以使用BK.SkeletonAnimation.accessoryTypes获取所有的装扮类型名称

熟悉spine的都知道spine中有几个基础的概念,bone,slot,attachment,而accessory与其中的关系相当于多个attachment的组合。即accessory隶属于多个attchment。

需要注意的是对于普通的spine动画,并不存在accessory

例子

查看 script/demo/spine/skeletonAnimation_demo.js

原文: https://hudong.qq.com/docs/engine/api/BK.SkeletonAnimation.html