DragonBones骨骼动画事件系统详解

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介: DragonBones骨骼动画事件系统详解

DragonBones 本身并不实现事件派发,动画事件和自定义事件的派发与接收都依赖引擎的事件系统,这样可以使得 DragonBones 的事件融合到所支持的各个引擎的事件系统之中。

在 Egret 中,DragonBones 是依赖 EgretArmatureDisplay 来派发和接收事件的,所以通过对其进行事件监听,就可以收到所有来自骨架的动画事件和自定义事件(更多关于 Egret 的事件知识请参考 Egret 的相关教程和文档)。

dragonBones.EventObject 定义了 DragonBones 中相关的事件类型,同时他也会做为一个事件参数通过 dragonBones.EgretEvent 传递给事件监听器。

代码如下:

let armatureDisplay = factory.buildArmatureDisplay("armatureName");
this.addChild(armatureDisplay);
// Event listener.
function animationEventHandler(event: dragonBones.EgretEvent): void {
let eventObject = event.eventObject;
console.log(eventObject.animationState.name, event.type, eventObject.name ? eventObject.name : "");
}
// Add animation event listener.
armatureDisplay.addEventListener(dragonBones.EventObject.START, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.LOOP_COMPLETE, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.COMPLETE, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_IN, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_IN_COMPLETE, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_OUT, animationEventHandler, this);
armatureDisplay.addEventListener(dragonBones.EventObject.FADE_OUT_COMPLETE, animationEventHandler, this);
// Add animation custom event listener.
armatureDisplay.addEventListener(dragonBones.EventObject.FRAME_EVENT, animationEventHandler, this);
// Add animation sound event listener.
factory.soundEventManager.addEventListener(dragonBones.EventObject.SOUND_EVENT, animationEventHandler, this);
  • 自定义事件可以在 DragonBones Pro 中的事件时间轴添加。(视频教程
  • 自定义事件可以配置自定义参数。
  • 声音事件可以通过 factory 的 soundEventManager 实例统一监听,而不必为每个骨架单独监听。

可以访问示例中心查看参考示例的效果和下载源码:

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore     ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库 ECS 实例和一台目标数据库 RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
目录
相关文章
|
8月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
515 0
|
8月前
dragonBones.CCFactory.getInstance()导致的dragonBones突然不播放
dragonBones.CCFactory.getInstance()导致的dragonBones突然不播放
46 0
|
8月前
|
JavaScript atlas Kotlin
深度解读dragonBones使用SpriteFrame任意换肤的实现
深度解读dragonBones使用SpriteFrame任意换肤的实现
139 0
|
存储 图形学
动画系统中的基础动画
动画系统中的基础动画
190 0
|
存储 iOS开发 计算机视觉
iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程
iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程
185 0
iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程
|
iOS开发
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
iOS开发CoreAnimation解读之二——对CALayer的分析
225 0
iOS开发CoreAnimation解读之二——对CALayer的分析(二)
|
物联网 API
ThingJS:仅需不到5行代码,实现炫酷3D动画
在物联网领域,Thing都有哪些动效呢?
|
前端开发 图形学 Android开发

热门文章

最新文章