怎样用更少的美术本钱创造出更生动的动画结果？本日就为人人引见一套开源的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所示。
图1
然后翻开你所挑选的项目，如图2所示。
图2
接下来为人人解读图2中各项东西的运用要领
1、体系东西栏
体系东西栏包含最经常运用的几个功用，从左到右的按钮功用顺次是：新建项目、翻开项目、保留项目、打消、重做、导入、导出、预览作品分享，如图3所示。
图3
新建项目：用于新建一个项目 ,单击该按钮翻开新建项目对话框。
翻开项目：用于翻开一个已有项目，单击该按钮翻开体系指定文件对话框。
保留项目：假如当前的项目有更改，保留项目按钮将亮起，单击该按钮后将保留当前项目，项目保留后，保留项目按钮暗掉。
打消：用于打消上一次的编辑操纵。
重做：用于重做上一次打消掉的编辑操纵。
导入：用于导入一个支撑的项目文件花样，单击该按钮将翻开导入对话框
导出：用于导出项目。单击该按钮将翻开导出对话框。
预览：在阅读器中预览动画的运转结果。假如项目包含多个动画剪辑，可以在阅读器中单击鼠标左键来切换。
作品分享：翻开作品分享上传页面。
2、主场景东西栏
主场景东西栏用于场景操纵中鼠标情势的切换，由左到右顺次为:挑选东西、Pose东西、手型东西、竖立骨骼东西，如图4所示。
图4
挑选东西：选中骨骼时，鼠标单击骨骼自身，按住左键挪动，可以在X、Y方向恣意挪动骨骼。鼠标单击赤色X轴(或绿色Y轴)可以在单一X轴(Y轴)方向上平移。鼠标拖动插槽内的图片自身，按住左键挪动，可以在X、Y恣意方向上挪动骨骼。鼠标单击赤色X轴(或绿色Y轴)可以在单X轴(Y轴) 方向上平移。鼠标拖动缩放手柄可以缩放插槽。鼠标单击并按住其他地区时可以扭转插槽(插槽只要在骨架装配情势下可以被选中并转变状况)。
Pose东西：选中一个骨骼时，骨骼会追跟着鼠标的拖拽扭转。复选两根或以上骨骼时，选中的骨骼会遵照IK划定规矩，追跟着鼠标的拖拽。
竖立骨骼东西：选中竖立骨骼东西，在主场景中单击鼠标左键并拖拽便可竖立骨骼。别的在主场景中还支撑一些经常运用操纵：
推拉鼠标滚轮便可以缩放DragonBones Pro的场景。
鼠标处于挑选东西或手型东西时，左键双击恣意处， 场景大小便恢复到100%。
右键单击恣意地区作废挑选。
权重东西：权重示意了蒙皮遭到差别骨骼形变影响的占比，合理分派好每一个蒙皮极点的权重至关主要。
3、可见可选过滤面板
可见可选过滤面板用于翻开和封闭骨骼和插槽的可见、可选、是不是继续编辑的开关，如图5所示。
图5
可见：翻开时，骨骼或插槽在主场景中可见；封闭时，骨骼或插槽在主场景中不可见。
可选：翻开时，骨骼或插槽在主场景中可以被选中；封闭时，骨骼或插槽在主场景中不可以被选中。
继续：翻开时，骨骼或插槽会继续父骨骼的编辑；封闭时，骨骼或插槽不会继续父骨骼的编辑。
4、变更面板
变更面板用来显现和修正骨骼或插槽的X、Y坐标(相对于父骨骼)、缩放比例、扭转角度以及图片的尺寸（仅限插槽和图片时显现)。变更面板如图6所示。
图6
5、场景树面板
场景树面板用于显现和编辑主场景中骨骼和插槽的父子树型关联，如图7所示。
图7
右上角按钮顺次为：智能过滤、骨格竖立按钮和删除按钮。骨架装配情势下，双击场景树中的骨骼或插槽会弹出重定名窗口。此面板在骨架装配和动画制造下都可显现，但在动画制造下不可编辑。骨骼和插槽可以在场景树中复选。
以下是骨骼继成关联在场景树中的编辑：
骨骼间的继续关联可以经由过程在场景树面板内拖拽转变。
子骨骼可以被拖拽到同级或父及其以上的骨骼下。
父骨骼不能被拖拽到它的子骨骼及其以下骨骼下
6、层级面板
层级面板用于显现和编辑主场景中插槽的高低层级关联。可以经由过程拖拽转变插槽间的层级关联。选中插槽后，也可以单击右上角的向上一层和向下一层按钮或快捷键[]来转变层级关联，此面板只涌如今骨架装配情势下。层级面板如图8所示。
图8
7、资本面板
项目所运用的一切图片都保留在资本面板中。DragonBonesPro每一个项目的资本库都对应一个体系中现实存在的文件夹，文件夹中DragonBones Pro所支撑的PNG图片都会被显如今资本面板中。经由过程由体系其他文件夹向DragonBones Pro的资本面板中拖拽PNG文件的要领，向资本库里增加图片；响应的PNG文件也会被复制到对应的资本库文件夹中。也可以单击“导入资本”按钮，在弹出的体系窗口中指定要增加的资本PNG文件。资本面板如如图9所示。
图9
右上角按钮顺次为：导入资本按钮、翻开库文件夹按钮和修正途径按钮。此面板只可以在骨架装配情势下显现。
8、编辑情势切换按钮
编辑情势切换按钮在场景的左上角，用于切换骨架装配和动画制造，如图10所示。
图10
9、动画面板
动画面板用于显现和编辑动画剪辑，如图11所示。
图11
右上角按钮顺次为：新建动画剪辑按钮、克隆动画剪辑按钮、重定名和删除动画剪辑按钮。此面板只能在动画制造下显现。动画面板下边的3个参数离别是：
动画时候：不可编辑，单元为s。动画剪辑的现实持续时候遵照帧率和动画剪辑的总帧数盘算得出。
过分时候：默许值为0，可编辑，单元为s。用来设定游戏中差别动面间的过分时候。
播放次数：默许值为0，可编辑。用来设定游戏中动画的反复次数，当设为0时示意无限大反复。
10、时候轴面板
时候轴面板用于动画剪辑的编辑，此模板只能在动画制造下显现，如图12所示。
图12
播放掌握东西
时候轴面板上的播放掌握东西，用于掌握动画剪辑的播放。由左向右顺次为：回到首帧按钮、前一帧按钮、倒放按钮、播放按钮、下一帧按钮、末了帧按钮、播放速率掌握滑块、当前帧、当前时候、帧率，如图13所示。播放速率掌握滑块的掌握局限是0.1x~10x。当前帧：可编辑，输入细致的帧数，绿色播放指针便会跳转到响应的帧数。拖动绿色指针或播放动圈，当前帧的数值也会跟着响应变化。当前时候：不可编辑，基于当前帧和帧率盘算得出。帧率：可编辑，默许为24fps。设定每秒钟的动画有若干帧，如图13所示。
图13
帧编辑东西栏
帧编辑东西栏，由左到右顺次为：删除非必要帧、编辑多帧、洋葱皮按钮、向右挪动帧、向左挪动帧、自动症结帧按钮、曲线编辑器、如图14所示。
图14
删除非必要帧：自动排查全部时候轴内的非必要症结帧并删除。删除非必要症结帧可以在完整不影响动画显现结果的前提下给动画文件瘦身。
洋葱皮按钮：开关洋葱皮功用。
编辑多帧：多选帧可批量编辑曲线 。
向左挪动症结帧，向右挪动症结帧：单击按钮将整休挪动选中症结帧以右(左)的一切症结帧。若左边的上顿已有症结帧，则不能再向左挪动，向左挪动症结帧按钮将变灰，右侧亦然。
自动症结帧按钮：该按钮具有开关两种状况，白色为关，赤色为开。开启后，对骨骼或插槽的修改将会在绿色播放指针地点帧和响应的骨骼或插槽层上自动增加症结帧。
曲线编辑器：曲线编辑器在这个面板中，你可以对帧与帧间的补间运用完成差别的补间结果。
时候轴东西栏
时候轴东西栏，由左向右顺次为：折叠列表、睁开列表、复制帧按钮、剪切帧按钮、粘贴帧按钮、删除帧按钮，如图15所示。
图15
折叠列表：折叠时候轴上一切的层。
睁开列表：睁开时候轴上一切的层。
复制帧按钮：选中症结帧后单击该按钮，帧的参数便被复制到剪贴板中。
剪切帧按钮：选中症结帧后单击该按钮，帧的参数便被剪切到剪贴板中。
粘贴帧按钮：剪贴板中的帧参数可以被粘贴到时候轴的恣意帧数、恣意层(骨骼层和插槽层的帧不能相互粘贴，症结帧中纪录的参数是与上一个症结帧的相对更改值，0帧的相对更改值为0)，也可以掩盖已存在症结帧。
删除帧按钮：删除当前选中帧。
增加症结帧按钮：该按钮具有3种状况按钮，白色示意无修改，无症结帧。黄色示意有修改，未增加或更新症结帧。赤色示意无修改已增加或更新症结帧。白色或黄色状况下，单击该按钮，将在绿色播放指针地点帧和响应骨骼层或插槽层上增加或更新症结帧。赤色状况下点击无结果。赤色或白色状况下，修改骨骼或插槽，该按钮将变成黄色状况，示意骨骼或插槽发作修改。无骨骼或插槽选中时，该按钮不可用。
曲线图面板按钮：开关曲线图面板。
时候轴缩放东西
时候轴缩东西用于掌握时候轴的比例缩放，如图16所示。左边为合适屏幕按钮，—和+按钮掌握减少和放大拖动滑块也可以掌握缩放。如图16所示。
图16
洋葱皮东西
开启洋葱皮功用后，会同时显现前后N帧（默许为3帧)的影图，轻易动画师更好地定位角色行动，使一连动画更流通。进入动画情势，单击时候轴东西栏上的洋葱皮按钮开启洋葱皮功用，如图17所示。
图17
洋葱皮功用开启后，主场景上的动画涌现蓝色（前导帧）和赤色（后续帧）的影图，动画显现影图结果，如图18所示。
图18
同时，时候轴的绿色播放指针会涌现前后默许覆益3帧的洋葱皮显现区城、左边的调解手柄为赤色，右侧的调解手柄为蓝色，如图19所示。
图19
拖动蓝色或赤色手柄可以调解蓝色或赤色洋葱皮显现的帧数。掩盖的帧数越多，在主场餐中显现的影图越多。洋葱皮显现区会跟着绿色播放指针的挪动而挪动。在动画播放过程当中，绿色播放指针上的洋葱皮显现地区会隐蔽。主场景上，赤色和蓝色的影图会随原始动画一同播放，蓝色影图的动画行动超前于原始动画，赤色影图的动画行动后滞于原始动画。
洋葱皮的特征：蓝色或赤色的洋葱皮显现地区最长不能凌驾动画剪辑自身的长度。虽然动画剪辑默许轮回播放、但当绿色播放指针在第0帧的时刻，主场景中没有赤色洋葱皮影图显现。当绿色插放指针在最末一帧时，主场景中没有蓝色洋葱皮影图显现。
时候轴
骨骼层内症结帧为白色，插槽层内症结帧为黄色，事宜层内症结帧为赤色，含有事宜、跳转、声响的骨骼症结帧为粉色。时候轴的第一层为动面的排层，不能直接编辑，在其他恣意层增加症结帧后，动画剪辑层便会涌现菱形方块，示意当前帧下某层或多层存在症结帧。白色示意为骨骼层症结帧，黄色示意插槽层症结帧，赤色为事宜层症结帧，粉色为存在多种层夹杂的天键帧。选中菱形方块便选中这一帧数下的一切症结帧。可以举行团体摆布平移、拖拽、复制、剪切、粘贴、删除。只需响应帧数下存在症结帧，时候轴标尺上便会涌现红线，时候轴标尺个会随时候轴的高低转动条转动，一直可见。时候轴的第一级为骨骼层或事宜层，第二级为插槽层，插槽层相对骨骼层向右缩进一层。时候轴内不表现父子骨骼的层级关联。事宜层只要一层。选中的层会高亮，对应层的骨骼或插槽也会被选中，反之，选中骨骼或插槽，对应的层也会被选中。症结帧可以在时候轴同层内恣意拖拽。时候轴面板如图20 所示。
图20
曲线编辑器
曲线编辑器在这个面板中，你可以对帧与帧间的补间运用完成差别的补间结果。比方，你愿望一个人物跑步行动中手臂的摆动是先快后慢、那末你可以在手臂摆动行动的前两个症结帧中挑选第一个症结帧，然后单击时候轴上的曲线按钮如图21所示，翻开曲线编辑器面板。
图21
症结帧之间默许运用的是线性补间。在曲线编排器中就是一条直线。你可以在面板的最下方看到一排按钮，是东西中预设的一些缓动结果，如图22所示。
图22
单击这些按钮可以使曲线疾速变成响应的结果，从左至右顺次是：无补间、线性补间、谈入、谈出、淡入谈出(淡入代表先慢后快，淡出代表先快后慢，淡入谈出代表一快一慢)，如图23所示。
图23
假如你对这些预设的结果不满意，也可以经由过程拖动曲线两头掌握杆上的掌握点(白色的空心圆点)来自在调治曲线，如图24所示。如今掌握点只能在100%~200%之间调治，今后的版本会摊开这个限定。曲线进入负值地区代表动画先往反方向运转一段，再正向运转。曲线凌驾100%代表动画会凌驾目的位运转，再反向运转到目的位。
图24
值得一提的是，对曲线的编辑结果，是可以及时反应到场景的动画上的，设计师可以一边播放动画，一边调治曲线预览结果。别的，对曲线的调治是立即更改动画数据的，并不须要设计师再次单击症结帧按钮确认修正。假如对修正结果不满意，可以经由过程打消功用，回到修正之前的状况。
三、新建动画项目
DragonBonesPro供应了轻易快捷的项目。
1、新建项目
在迎接首页翻开新建项目，会弹出一个对话框，挑选竖立龙骨动画，如图25所示。
图25
点击竖立龙骨动画会涌现以下几个挑选：骨骼动画模板、逐帧动画模板、补间动画模板、自定义，如图26所示。
图26
点击响应的模板在竖立栏里会挑选相对模板，它们只是参数差别，功用是一样的，你也可以在竖立完成项目，在资本里点击右键，涌现新建元件，如图27所示。
图27
点击新建元件，同样会涌现犹如图上挑选，如图28。
图28
2、图片增加删除
由资本库拖拽图片到主窗口：
假如没有图层被选中或选中图层当前帧已有非空症结帧，便会在时候轴自动增加一个以图片名定名的图片层。
假如选中图层，当前帧没有症结帧，则当前帧会增加症结帧，图片被到场症结帧。
假如选中图层，当前帧为空症结帧，图片将被增加到空症结帧，空症结帧变成非空症结帧。
3、图层递次
可以在时候轴内拖拽转变图层的叠加递次。
四、项目的导入与导出
导入项目DragonBones Pro 如今支撑导入多种花样的DragonBones数据文件(包含json和xml)和数据包文件(包含png和zip) ，别的DragonBones Pro 支撑经由过程导入插件，扩大导入数据的花样。官方自告的Spine 2.x导入插件和Cocos1.x导入插件就可以协助DragonBones Pro导入Spine和Cocos的数据文件。导入的要领很简单，只需将须要导入的数据文件或数据包文件拖拽到软件中即可。假如导入的是数据文件，会涌现如图 29所示的界面 。
图29
软件会智能地在数据文件地点的日录寻觅纹理集文件，假如没有找到或许找到的不对，记得要手动修正一下途径，不然会涌现找不到图片的状况。假如导入的是数据包文件就不会有找不到纹理集的状况。别的软件会自动生成项目名，须要修正的话可以手动修正一下。
DragonBonesPro可以将项目导成json或xml花样，图片可以是纹理集或图片文件情势，导出窗口如图30所示。
图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的经常运用术语和运用要领引见（图）的细致内容，更多请关注ki4网别的相干文章！
