动画工具DragonBones的常用术语和使用方法介绍（图）-

怎样用更少的美术成本创造出更生动的动画效果？今天就为大家介绍一套开源的2D骨骼动画框架和工具——DragonBones，它包含了桌面骨骼动画制作工具DragonBonesPro和一套多语言版本的DragonBones骨骼动画库。

下面为大家介绍DragonBones的常用术语和使用方法。

一、DragonBones 2D骨骼动画中的常用术语

骨架：骨架Armature,是2D骨骼动画中最常用的名词，一般指的是由很多骨骼组成的一个整体。DragonBones中同时代表一个可以包含动画的角色。

骨骼（骨头）：骨格或骨头Bone,是骨骼动网中组成骨架的最重要的一个基础单元。骨头自身不能拆解，在骨架中可以进行相对的平移、旋转、缩放、运动，组合起来就形成了骨格动画。另外骨骼之间可以有父子关系。一般来说，在默认正向动力学的情况下，父骨骼运动会带动子骨骼一起运动、比如一个人物举起大臂，那小臂作为大臂的子骨骼，也会随之被抬起。

插槽：插槽是骨骼动画中显示图片的容器，隶属于骨骼。每个插槽可以包含多张图片，但是同一时间只显示一张图片。每个骨格可以包含多个插槽。插槽链接了骨骼这个动画逻辑单元和图片这个动画显示单元，组成了骨骼-插槽-图片，这个DragonBones骨骼动画中的基本骨骼结构。

图片(纹理)：图片就是显示图像的元素，在2D骨骼系统中，图片和纹理的意义区别不大，所以这里也可以叫纹理。

纹理集：纹理集是将图片打包之后组成的大图，方便资源整合传播和在游戏中加载，使用硬件加速引擎或者Egret Runtime 的话，纹理集能大幅度提高渲染效率。所以DragonBones默认提供的导入资源的接口就是用纹理集。

动画补间：一般设计师在做骨骼动画的时候，并不需要在每帧都为角色摆动作，而只是在一些关键的地方(关键帧)摆出关键的动作，关键动作之间全部由程序生成的补间代替，这就是动画补间。动画补间可以是线性的也可以是非线性的。线性补间意味着补间上的元件是匀速变换的(平移、旋转、缩放)。非线性补间般由各种曲线表示，DragonBones 中默认使用贝塞尔曲线表示非线性补间。

动画过渡：动画过渡是指从一个动画切换到另一一个动画时，产生的过渡效果。DragonBones提供了动画动面切换时的过渡效果功能，只要设置一个过渡时间，就能自动生成平滑的过渡效果。

动画融合：动面融合提供了一个角色同时播放多个动画的功能。这个功能一般会在两种情况下使用。第1种是如一个人物角色动画比较复杂，可能需要上半身和下半身分别做动画设计，然后可以任意组合。第2种是如需要个角色在跑步的同时中弹，身体后仰，也就是同时插放跑步和中弹的动画。动画融合的功能通过给不同的动画设置权值，给不同的骨路增加动画遮罩来实现这两种需求。需要注意的是DragonBones只有普通模式提供了动画融合的功能，极速模式是不提供这个功能的。

正向动力学(FK)和反向动力学(IK)：在骨骼动画中，一般来讲，子骨骼的运动会受到父骨骼的影响，例如大臂旋转，小臂也会跟随旋转，这叫作正向动力学，也就是父亲影响孩子。当然现实世界也存在反过来的情况，例如有入打你一拳，你用小臂去阻挡，那小臂受力运动的同时也会带动大臂一同做受力运动，这叫作反向动力学。在DragonBones中控制骨路调节动作的时候，一般情况骨骼是符合正向动力学规律的，也就是调节父骨骼，子骨骼也会受影响。如果希望通过反向动力学调节动画，可以选选择相应的IK工具来实现。

首先，安装完成后打开欢迎界面，选择项目，如图1所示。

图4

选择工具：选中骨骼时，鼠标单击骨骼本身，按住左键移动，可以在X、Y方向任意移动骨骼。鼠标单击红色X轴(或绿色Y轴)可以在单一X轴(Y轴)方向上平移。鼠标拖动插槽内的图片本身，按住左键移动，可以在X、Y任意方向上移动骨骼。鼠标单击红色X轴(或绿色Y轴)可以在单X轴(Y轴) 方向上平移。鼠标拖动缩放手柄可以缩放插槽。鼠标单击并按住其他区域时可以旋转插槽(插槽只有在骨架装配模式下可以被选中并改变状态)。

Pose工具：选中一个骨骼时，骨骼会跟随着鼠标的拖拽旋转。复选两根或以上骨骼时，选中的骨骼会遵循IK规则，跟随着鼠标的拖拽。

创建骨骼工具：选中创建骨骼工具，在主场景中单击鼠标左键并拖拽便可创建骨骼。另外在主场景中还支持一些常用操作：
推拉鼠标滚轮便可以缩放DragonBones Pro的场景。
鼠标处于选择工具或手型工具时，左键双击任意处， 场景大小便恢复到100%。
右键单击任意区域取消选择。

权重工具：权重表示了蒙皮受到不同骨骼形变影响的占比，合理分配好每个蒙皮顶点的权重至关重要。

3、可见可选过滤面板

可见可选过滤面板用于打开和关闭骨骼和插槽的可见、可选、是否继承编辑的开关，如图5所示。

图8

7、资源面板

项目所使用的所有图片都保存在资源面板中。DragonBonesPro每个项目的资源库都对应一个系统中实际存在的文件夹，文件夹中DragonBones Pro所支持的PNG图片都会被显示在资源面板中。通过由系统其他文件夹向DragonBones Pro的资源面板中拖拽PNG文件的方法，向资源库里添加图片；相应的PNG文件也会被复制到对应的资源库文件夹中。也可以单击“导入资源”按钮，在弹出的系统窗口中指定要添加的资源PNG文件。资源面板如如图9所示。

图19

拖动蓝色或红色手柄可以调整蓝色或红色洋葱皮显示的帧数。覆盖的帧数越多，在主场餐中显示的影图越多。洋葱皮显示区会随着绿色播放指针的移动而移动。在动画播放过程中，绿色播放指针上的洋葱皮显示区域会隐藏。主场景上，红色和蓝色的影图会随原始动画一起播放，蓝色影图的动画动作超前于原始动画，红色影图的动画动作后滞于原始动画。

洋葱皮的特性：蓝色或红色的洋葱皮显示区域最长不能超过动画剪辑本身的长度。虽然动画剪辑默认循环播放、但当绿色播放指针在第0帧的时候，主场景中没有红色洋葱皮影图显示。当绿色插放指针在最末一帧时，主场景中没有蓝色洋葱皮影图显示。

时间轴

骨骼层内关键帧为白色，插槽层内关键帧为黄色，事件层内关键帧为红色，含有事件、跳转、声音的骨骼关键帧为粉色。时间轴的第一层为动面的排层，不能直接编辑，在其他任意层添加关键帧后，动画剪辑层便会出现菱形方块，表示当前帧下某层或多层存在关键帧。白色表示为骨骼层关键帧，黄色表示插槽层关键帧，红色为事件层关键帧，粉色为存在多种层混合的天键帧。选中菱形方块便选中这一帧数下的所有关键帧。可以进行整体左右平移、拖拽、复制、剪切、粘贴、删除。只要相应帧数下存在关键帧，时间轴标尺上便会出现红线，时间轴标尺个会随时间轴的上下滚动条滚动，始终可见。时间轴的第一级为骨骼层或事件层，第二级为插槽层，插槽层相对骨骼层向右缩进一层。时间轴内不体现父子骨骼的层级关系。事件层只有一层。选中的层会高亮，对应层的骨骼或插槽也会被选中，反之，选中骨骼或插槽，对应的层也会被选中。关键帧可以在时间轴同层内任意拖拽。时间轴面板如图20 所示。

可以在时间轴内拖拽改变图层的叠加顺序。

四、项目的导入与导出

导入项目DragonBones Pro 目前支持导入多种格式的DragonBones数据文件(包括json和xml)和数据包文件(包括png和zip) ，另外DragonBones Pro 支持通过导入插件，扩展导入数据的格式。官方自告的Spine 2.x导入插件和Cocos1.x导入插件就能帮助DragonBones Pro导入Spine和Cocos的数据文件。导入的方法很简单，只需将需要导入的数据文件或数据包文件拖拽到软件中即可。如果导入的是数据文件，会出现如图 29所示的界面 。

图30

输出路径默认为“我的文档+项目名”，用户可以手动指定，如果导出 zip包，则包文件会出现在指定的输出路径下。

如果导出项目文件夹，则会在指定的输出路径下建立和项目名相同的子目录，其下包含数据文件和图片。

输出比例默认为 1。

用户可以输入数值来控制导出项目的缩放。

“填充色” 复选框，默认为不勾选(透明背景)状态，勾选后用户可以单击右边的颜色方块儿打开颜色选择窗口，选择需要作为背景色的颜色“打包zip” 复选框，默认为不勾选状态，也就是导出项目文件夹，勾选后则导出zip包形式的项目文件，下面会将psd文件转换成DragonBones数据文件，在DragonBones Pro的安装目录中提供了一个脚本文件PSExportDB,jsx. 用于将Photoshop中的设计图导出皮DragonBones格式数据+图片。

注意：在Mac系统中，需要在应用程序中找到DragonBones Pro.app，然后右键单击选择显示包内容。

脚本文件就在/Contents/Resources/日录下，导出的方式如下：在Photshop中打开设计图，然后依次在菜单中选择“文件—>脚本—>浏览”命令，然后在打开的系统定位例口中找到PSExportDBjsx文件，选择打开，弹出如下对话框：

Export PNGs导出图片
ExportISON导出json文件
Ignore Hidden Layers忽略隐藏图层
Image Scale整体缩放比例

依照需求设置好，单击OK按钮Photoshop便开始导出，导出完成后，在设计图所在的日录下会生成一个DrgonBmes{PSD的文件名}的目录，如果你导出同时勾选PNGs和JSON，其下会有和psd文件同名的一个json文件和一个Textuer目录。

Texture下是所有的png图片文件。在之后只需将导出的数据文件拖进DragonBones Pro设置好图片日录，即可完成导入。导入后，图片的相对位置大小和相互间的层级关系都和Photoshop中完全相同。

以上就是动画工具DragonBones的常用术语和使用方法介绍（图）的详细内容，更多请关注 第一PHP社区 其它相关文章！