laya-spine动画的使用
laya2和laya3的spine动画在使用过程中并无太大区别,这里以laya3为例。
转换
首先将做好的spine动画按jison格式导出,导出完之后的文件应包括图集、图片和json类型的3个文件。然后再用laya的骨骼动画转换工具转换成laya内置的模式,转换后的文件包括图片和sk类型的2个文件。如下图所示:

加载
在场景中直接创建
在场景中右键选择=>2D骨骼动画=>Skeleton,直接创建Skeleton类型的节点,然后在属性面板=>Skeleton=>Source中选择对应的资源,这时候在下侧SkinName和AnimationName中就会显示对应的下拉列表名称。这时候如果勾选Preview,在编辑模式下即可直接观察对应动画的播放情况。

在脚本中load
使用load方法加载成功后,将返回一个Templet模版类型的对象,然后使用buildArmature方法创建对应的Skeleton类型的对象。
值得一提的是buildArmature有0、1、2三种类型的创建方式,其中0不支持换装,1、2支持换装但性能开销更大。1使用了动画缓冲区,使得内存更大,2则实时计算,故内存开销小,计算量大。
Laya.loader.load("skeleton/Dragon/Dragon.sk").then((templet: Laya.Templet) => {let skeleton = templet.buildArmature(0);});// 另一种方式,没有本质区别,在Skeleton内部也是调用Laya.loader.load方法let sk = new Laya.Skeleton();sk.load("skeleton/Dragon/Dragon.sk", Laya.Handler.create(this, (ske: Laya.Skeleton) => {console.log("加载完成");}));
使用
播放
将skeleton节点放到场景中后,直接调用play方法即可播放。
skeleton.playbackRate(2); // 设置播放速率, 数字越大, 速度越快skeleton.play(0, true, true, 0, 0, true, false); // 播放skeleton.paused(); // 暂停skeleton.resume(); // 继续
其中force参数表示:是否强制生效。默认值为true,设为false时表示如果当前正在播放动画且与要设置的动画一致,就不重置播放了。
freshSkin表示是否刷新皮肤数据,默认为true。当为true时laya将会调用templet模版中的showSkinByIndex来强制刷新皮肤。
事件
Sketeton监听了四种事件,分别是播放、暂停、停止、标签,其中播放、暂停、停止是在动画播放的各个阶段播放,标签是在spine制作时添加,到某一帧时触发标签事件。
skeleton.on(Laya.Event.PLAYED, this, () => {console.log("动画开始播放");});skeleton.on(Laya.Event.PAUSED, this, () => {console.log("动画暂停");});skeleton.on(Laya.Event.STOPPED, this, () => {console.log("动画停止");});skeleton.on(Laya.Event.LABEL, this, (e: Laya.EventData) => {console.log("动画播放到标签: " + e.name);});
设置插槽
laya提供了4种方式设置插槽,在这里我们要了解在spine中的层级关系是骨骼节点->插槽->插槽下的皮肤,laya中Skeleton拥有Bone骨骼节点数组、_boneSlotDic骨骼插槽字典,在这里我们设置的其实是插槽的皮肤,即BoneSlot中的currSlotData.displayArr的索引值,其中currSlotData.displayArr存放的就是对应插槽的皮肤数据。
let boneSlot: Laya.BoneSlot = skeleton.getSlotByName("head"); // 根据名称获得boneSlotskeleton.showSlotSkinByIndex("head", 0);skeleton.showSlotSkinByName("head", "head_01");skeleton.replaceSlotSkinByIndex("head", 0, 1);skeleton.replaceSlotSkinName("head", "head_01", "head_02");
显示皮肤
参数freshSlotIndex表示是否将插槽纹理重置到初始化状态,默认为true。
console.log("皮肤名:", skeleton.skinName);skeleton.showSkinByIndex(0, true);skeleton.showSkinByName("default", true);
使用该方法时需要在spine中设置不同的皮肤。在laya中该皮肤数据则存放在templet模版的skinDataArray中。
一些属性
skeleton.getAnimNum(); // 获取动画数量skeleton.getAniNameByIndex(0); // 根据索引获取对应动画名console.log("总帧数:", skeleton.total);console.log("当前帧:", skeleton.index);console.log("当前动画名:", skeleton.animationName);console.log("当前模式", skeleton.aniMode);let temp: Laya.Templet = skeleton.templet;let player: Laya.AnimationPlayer = skeleton.player;
相关文章:
laya-spine动画的使用
laya2和laya3的spine动画在使用过程中并无太大区别,这里以laya3为例。 转换 首先将做好的spine动画按jison格式导出,导出完之后的文件应包括图集、图片和json类型的3个文件。然后再用laya的骨骼动画转换工具转换成laya内置的模式,转换后的文…...
Vue项目实战-新能源汽车可视化(一)(持续更新中)
一.项目代码 1.App.vue <template><!-- 模板--><div id"wrapper"><div style"width: 100%"><el-tabs v-model"activeName" id"tabs"> <!-- 标签栏里包含了三个标签面板,分别是研发与维…...
百度SEO前10关键词排名波动跟用户行为反馈有很大关系
大家好,我是林汉文(谷歌SEO专家),在百度SEO优化中,网站的排名并非一成不变,尤其是前10名的位置,更是动态变化。很多站长可能会发现,有时明明内容质量不错,外链也稳定&…...
基于微信小程序的电影交流平台
作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…...
Java实现 itext PDF文件打印水印(文字和图片水印)
itext PDF文件打印水印 前言:公司有个需求,打印的合同模板要加上水印,但是由于itext版本问题,网上千篇一律的方法基本都没办法有效使用,然后自己琢磨下,记录下实现水印的功能的笔记。多页上都加上水印&…...
面经之一:Synchronized与ReentrantLock区别
Synchronized与ReentrantLock是Java中用于实现线程同步的两种主要机制,它们各有特点和适用场景。以下是它们的主要区别: 实现方式: Synchronized:是Java语言内置的关键字,通过JVM层面的监视器(Monitor&…...
论文速读:面向单阶段跨域检测的域自适应YOLO(ACML2021)
原文标题:Domain Adaptive YOLO for One-Stage Cross-Domain Detection 中文标题:面向单阶段跨域检测的域自适应YOLO 1、Abstract 域转移是目标检测器在实际应用中推广的主要挑战。两级检测器的域自适应新兴技术有助于解决这个问题。然而,两…...
React中在map遍历中,给虚拟标签(<></>)加key
有时我们可能会需要在遍历时使用虚拟标签包裹内容,而不使用实际标签 ,这种时候会有一个问题,就是虚拟标签无法加key,这样控制台会一直有警告。 {[1,2,3,4].map(v><><div></div><div></div><…...
大数据生态守护:Hadoop的深度保护策略
PART 1 从Hadoop运行原理透视数据保护需求 1、Hadoop的定义与范畴 Hadoop,狭义而言,是一个专为大数据设计的分布式存储与计算平台,其核心组件包括HDFS(Hadoop分布式文件系统)、MapReduce(分布式计算框架&a…...
代码欣赏之:此题易错在 a+b 非要写成 a-fabs(b).因为这样就成了浮点值了,得不到准确数
代码欣赏之:此题易错在 ab 非要写成 a-fabs(b).因为这样就成了浮点值了,得不到准确数 7-23 小孩子才做选择,大人全都要 #include<stdio.h> #include<math.h> int main() {int a,b;scanf("%d %d",&a,&b);if(a&…...
ECharts饼图-环形图,附视频讲解与代码下载
引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个饼图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详…...
arcgis js 怎么加载geoserver发布的wms服务
arcgis js api加载wms服务,官方的参考样例: WMSLayer | Sample Code | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer 按照官方样例加载比较奇怪,我们平常习惯用url或者json的方式加载,稍微改一下就行,如下…...
前端_006_Vue2
文章目录 vue常用属性生命周期模版语法自定义组件全局注册 单文件组件路由 本文全部参考Vue2 简介:Vue是一个数据响应式,MVVM模型的JS框架 官网:https://v2.cn.vuejs.org/v2/guide/ API:https://v2.cn.vuejs.org/v2/api/#method…...
论多端数据互通网游的架构评估
摘要 在2023年,笔者参与了一款多端数据互通网络游戏的架构评估工作,并担任评估团队的核心成员。该游戏支持PC、移动设备和游戏机等多种终端,实现了数据的实时互通。本文通过该项目的评估实践,探讨了多端数据互通网游架构评估的关…...
网页HTML编写练习:华语榜中榜
网页效果 HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice…...
C++ 编程基础:深入理解 `pair`(键值对) 和 `unordered_map`(无序映射)
C 编程基础:深入理解 pair(键值对) 和 unordered_map(无序映射) 在 C 标准库中,pair(键值对)和 unordered_map(无序映射)是两种常用的数据结构,它…...
高德动态地图
1.搭建页面结构 <div class"dataAllBorder02" style"position: relative; overflow: hidden;"><div class"map_title_box" style"height: 6%"><div class"map_title_innerbox"><div class"map_t…...
springboot集成camunda学习与使用
springboot集成camunda学习与使用.md 0、前言一、Spring Boot 集成camunda流程引擎1.新建全新的springboot工程2.添加pom.xml依赖3.启动Spring Boot工程4.切换成mysql数据库5.设计并部署一个BPMN流程6.camunda流程引擎测试6.1 通过camunda web控制台测试6.2 通过camunda rest接…...
微服务架构学习笔记
#1024程序员节|征文# 微服务架构作为现代软件开发中的热门技术架构,因其灵活性和可扩展性,逐渐成为许多企业系统设计的首选。以下是关于微服务的一些学习笔记,涵盖微服务的核心概念、优缺点、设计原则以及常用工具等方面。 1. 微服务是什么&…...
代码优化之简化if臃肿的判断条件
简化if判断条件 方法1: #include <iostream> #include <vector> #include <functional>// 封装参数的结构体 struct ConditionParams {int facenum;double zoomRatio;int iso;double facelv;int face_w;double qualityScore;int xx;int yy; };//…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
规则与人性的天平——由高考迟到事件引发的思考
当那位身着校服的考生在考场关闭1分钟后狂奔而至,他涨红的脸上写满绝望。铁门内秒针划过的弧度,成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定",构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...
Canal环境搭建并实现和ES数据同步
作者:田超凡 日期:2025年6月7日 Canal安装,启动端口11111、8082: 安装canal-deployer服务端: https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...
PydanticAI快速入门示例
参考链接:https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...
python基础语法Ⅰ
python基础语法Ⅰ 常量和表达式变量是什么变量的语法1.定义变量使用变量 变量的类型1.整数2.浮点数(小数)3.字符串4.布尔5.其他 动态类型特征注释注释是什么注释的语法1.行注释2.文档字符串 注释的规范 常量和表达式 我们可以把python当作一个计算器,来进行一些算术…...
