DragonBones骨骼动画事件系统详解

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容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
目录
相关文章
|
1月前
Threejs实现动画
这篇文章讲解了如何使用Three.js实现动画效果,并介绍了如何控制动画的时间轴。
49 3
Threejs实现动画
|
1月前
Threejs播放模型自带动画
这篇文章介绍了在Three.js中如何播放带有预设动作的模型动画,并特别提到了如何设置动画循环模式以实现一次性播放效果。
43 3
Threejs播放模型自带动画
|
1月前
|
JavaScript
ThreeJs实现简单的动画
这篇文章介绍了如何使用Three.js实现简单的动画效果,并提供了利用requestAnimationFrame动态改变模型状态的代码示例。
55 0
ThreeJs实现简单的动画
|
1月前
|
存储 JavaScript
ThreeJS创建关键帧动画
这篇文章讲解了如何在Three.js中利用关键帧轨道 (`KeyframeTrack`) 创建动画效果,并提供了详细的步骤和代码示例。
64 0
|
5月前
|
开发工具 图形学
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
【推荐100个unity插件之11】Shader实现UGUI的特效——UIEffect为 Unity UI 提供视觉效果组件
325 0
|
6月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
459 0
|
6月前
dragonBones.CCFactory.getInstance()导致的dragonBones突然不播放
dragonBones.CCFactory.getInstance()导致的dragonBones突然不播放
38 0
|
6月前
dragonBones使用Sprite换肤后mesh问题
dragonBones使用Sprite换肤后mesh问题
61 0
|
11月前
|
图形学
Unity 事件系统
Unity 事件系统
106 0
实现场景切换的时候淡入淡出的效果(Unity3D)
在游戏中不可避免的要进行场景切换,如果切换的场景要加载的资源太多太大,那么就要耗时很长时间,这对于用户的体验来说很不舒服,也就是常说的游戏卡了。怎么解决这种尴尬呢。比较推荐的就是异步加载场景,然后中间加一个过渡场景,过渡场景做的美观一些,然后加一个进度条,看起来就不会那么尴尬了。然后在场景过渡的时候,加一个淡入淡出的效果,就很nice了今天就实现一个场景切换的时候淡入淡出的效果。剩下的场景异步加载还有中间过渡场景有时间再写。