简介
DragonBones 是一款基于 Flash（Adobe Animate）的动画工具，可用于设计游戏中的角色动画、UI 动画、游戏特效等，其官网为 http://dragonbones.com/zh-CN/index.html。而 dragonbones-runtime 是 DragonBones 的运行时，可以将 Flash 设计好的动画导出为其他语言的代码，在游戏引擎中渲染出动画。
npm 包 dragonbones-runtime 是 dragonbones-runtime 的 JavaScript 版本，支持在前端项目中导入使用，并且可以和各种前端框架进行整合。
在本文中，我们将学习如何使用 npm 包 dragonbones-runtime，在前端项目中集成使用它来渲染 Flash 设计好的动画。
安装
你需要先安装 Node.js 和 npm。安装好后，执行以下命令来安装 dragonbones-runtime：
npm install dragonbones-runtime
安装完成后，我们可以通过以下方式来导入 dragonbones-runtime：
import * as DragonBones from 'dragonbones-runtime';
加载动画资源
在正式渲染动画之前，我们需要先加载动画资源。
在 DragonBones 中，一个动画包含多个骨骼，一个骨骼由多个关键帧组成。一个动画有多个状态，每个状态有对应的动画数据。在 JavaScript 版本的 dragonbones-runtime 中，动画数据格式为 JSON 或二进制文件，可以通过 ajax 请求加载。
首先，我们需要构建图像资源和 JSON 版本的动画数据。如果你是 Flash 开发者，则可以使用 DragonBones Pro 创建动画，并导出资源文件和 JSON 版本的动画数据。如果你不是 Flash 开发者，则可以在 http://dragonbones.com/zh-CN/index.html 中下载官方提供的模板，制作属于自己的动画。
下面是一个加载动画资源的示例代码：
-- -------------------- ---- -------
----- ------------------ - --- ------------------------ -- -- ------- --
----- --------------- - ----- ----------------------------------------------------------- -- ------------------- -- ------
----- ------------------ - ----- ---------------------------------------------------------- -- ------------ -- --------
----- ------------- -- ---- ------- --
--------------------------------------------------------- -- --------------------- -- - -- -- ---- -- ------- ----
----- --- - ------------------------------
------- - --------------------------
------ --- --------------- -- ----------- - -----------
---
----------
-------------
-- -- -
----- ---------------- - --------------------------------------------------- -- -------- ------------ --
------------------------------------------- ---------------------------- ---------- -- -- ---------------
------------------------------------------------------------ ----------------- ---------- -- -- ----------------
---我们使用 DragonBones.CCFactory 类构建 facotry 实例，然后使用 fetch 方法来加载动画数据和图像资源数据。
接着，我们创建一张图像资源，并等待其加载完成后使用 createByImage 方法创建 textureAtlas 数据，最后使用 parseDragonBonesData 和 parseTextureAtlasData 方法解析动画数据。
渲染动画
加载完成动画资源后，我们已经可以开始渲染动画了。
在 JavaScript 版本的 dragonbones-runtime 中，我们可以使用 ArmatureDisplay 类来渲染 DragonBones 动画。
以下是一个渲染动画的示例代码：
const armatureDisplay = dragonbonesFactory.buildArmatureDisplay('Dragon'); // 使用 factory 创建 armatureDisplay 实例
armatureDisplay.animation.play('walk'); // 播放 walk 状态的动画
armatureDisplay.once(DragonBones.EventObject.COMPLETE, () => { // 动画播放完成后，移除 armatureDisplay 实例
armatureDisplay.dispose();
});我们使用 dragonbonesFactory.buildArmatureDisplay('Dragon') 方法创建 armatureDisplay 实例，其中 'Dragon' 是我们加载完成的动画名称。
接着，我们使用 armatureDisplay.animation.play('walk') 方法来播放 walk 状态的动画。
最后，我们使用 armatureDisplay.once(DragonBones.EventObject.COMPLETE, () => {...}) 监听动画播放完成的事件，并在事件触发后移除 armatureDisplay 实例。
总结
本文我们学习了如何在前端项目中使用 npm 包 dragonbones-runtime 来渲染 Flash 设计好的动画。我们学习了如何加载动画资源和渲染动画，并且学习了如何和游戏引擎进行整合。
掌握了这些技能，你就可以在你的前端项目中使用 DragonBones 来渲染动画了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63189