如何用更少的美术成本制作出更生动的动画效果？今天给大家介绍一套开源的二维骨骼动画框架和工具——DragonBones，包括桌面骨骼动画制作工具DragonBonesPro和一套多语言版本的DragonBones骨骼动画库。下面介绍一下DragonBones的常用术语和用法。一、DragonBones2D骨骼动画中常用的术语Skeleton：SkeletonArmature，是2D骨骼动画中最常用的术语，泛指由许多骨骼组成的整体。DragonBones还表示可以包含动画的角色。骨骼（Bone）：骨骼或骨骼骨骼是骨骼动态网络中构成骨架的最重要的基本单位。骨骼本身不可拆卸，可以在骨骼中进行相对平移、旋转、缩放、移动，组合形成骨骼动画。此外，骨骼之间可以存在父子关系。一般来说，在默认的前向动力学情况下，父骨骼的运动会带动子骨骼一起运动。例如，如果一个角色抬起上臂，作为上臂子骨骼的前臂也会相应地抬起。socket：socket是骨骼动画中显示图片的容器，属于骨骼。每个插槽可以包含多张图片，但一次只能显示一张图片。每个骨骼可以包含多个插槽。插槽链接骨骼的动画逻辑单元和图片的动画显示单元，形成骨骼-插槽-图片，是DragonBones骨骼动画中的基本骨骼结构。图片（纹理）：图片是显示图像的元素。在2D骨骼系统中，图片和贴图的含义没有太大区别，所以这里也可以称之为贴图。贴图集：贴图集是一张由图片打包而成的大图，方便游戏中的资源整合和分发加载。如果使用硬件加速引擎或者EgretRuntime，纹理集可以大大提高渲染效率。所以DragonBones默认提供的导入资源的接口是使用纹理集。Animationtweening：一般设计师在做骨骼动画的时候，不需要每一帧都给角色pose，只需要在一些关键的地方（关键帧）pose关键动作，关键动作都由程序控制.改为生成补间动画，即补间动画。补间动画可以是线性的或非线性的。线性补间意味着补间上的组件以恒定速率进行变换（平移、旋转、缩放）。非线性补间一般用各种曲线表示，DragonBones默认使用贝塞尔曲线来表示非线性补间。动画过渡：动画过渡是指从一个动画切换到另一个动画时产生的过渡效果。DragonBones提供了动画动面切换时的过渡效果功能，只要设置一个过渡时间，就可以自动生成平滑的过渡效果。AnimationFusion：MotionFusion提供同时为一个角色播放多个动画的功能。这个特性一般在两种情况下使用。第一种，如果一个角色的动画比较复杂，可能需要对上半身和下半身分别做动画设计，然后再任意组合。第二种是如果一个角色需要边跑边拍，身体往后靠，也就是边跑边拍动画。动画融合功能通过为不同的动画设置权重和为不同的骨骼路径添加动画遮罩来实现这两个需求。需要注意的是，DragonBones在普通模式下只提供动画融合的功能，极速模式不提供该功能。ForwardKinetics(FK)andInverseKinetics(IK)：在骨骼动画中，一般来说，子骨骼的运动会受到父骨骼的影响，比如大臂的旋转，小臂的旋转，这就是所谓的Positivedynamics，即父亲影响孩子。当然，现实世界中也存在相反的情况。比如有人打你一拳，你用小臂去挡，小臂就会发力，小臂也会带动上臂一起发力。这称为反向功率。学习。在DragonBones中控制骨骼路径调整动作时，一般情况下，骨骼是符合正向动力学规律的，即父骨骼被调整，子骨骼也会受到影响。如果想通过反向动力学来调整动画，可以选择相应的IK工具来实现。首先，安装完成后，打开欢迎界面，选择项目，如图1。图1然后打开你选择的项目，如图2。图2接下来，我们将讲解如何使用图2中的工具1.系统工具栏系统工具栏包含最常用的功能。按钮的功能从左到右依次为：新建项目、打开项目、保存项目、撤销、重做、导入、导出、预览工作共享，如图3所示。图3·新建项目：已使用要创建新项目，请单击此按钮以打开新项目对话框。·打开工程：用于打开已有工程，点击该按钮可打开系统指定文件对话框。·保存工程：如果当前工程已更改，保存工程按钮会亮起，点此按钮后保存当前工程，工程保存后保存工程按钮变暗。·撤销：用于撤销上次的编辑操作。·重做：用于重做上次撤销的编辑操作。·导入：用于导入支持的项目文件格式，单击此按钮将打开导入对话框·导出：用于导出项目。单击此按钮将打开导出对话框。·预览：在浏览器中预览动画的运行效果。如果您的项目包含多个动画剪辑，您可以通过在浏览器中单击鼠标左键在它们之间切换。·作品分享：打开作品分享上传页面。主场景工具栏主场景工具栏用于切换场景操作中的鼠标模式。从左到右依次为：SelectionTool、PoseTool、HandTool、CreateBoneTool，如图4所示。图4·选择工具：选择骨骼时，点击骨骼本身，按住左键移动，可以在X、Y方向任意移动骨骼。单击红色X轴（或绿色Y轴）以沿单个X轴（Y轴）方向平移。拖动鼠标在槽中拖动图片本身，按住左键移动，可以在X、Y任意方向移动骨骼。点击红色X轴（或绿色Y轴）进行平移在单个X轴（Y轴）方向。可以通过用鼠标拖动缩放手柄来缩放插槽。鼠标点击并按住其他区域可以旋转插槽（插槽只能在骨架组装模式下选择和更改状态）。·PoseTool：选中骨骼后，骨骼会随着鼠标的拖动而旋转。Whentwoormorebonesareselected,theselectedboneswillfollowtheIKrulesandfollowthedraggingofthemouse.·创建骨骼工具：选择创建骨骼工具，在主场景中点击鼠标左键并拖动创建骨骼。此外，主场景还支持一些常用的操作：DragonBonesPro的场景可以通过鼠标滚轮的推拉进行缩放。当鼠标在选择工具或手形工具中时，左键双击任意位置，场景大小将恢复为100%。右键单击任何区域以取消选择。·权重工具：权重表示皮肤受不同骨骼变形影响的比例。合理分配每个皮肤顶点的权重非常重要。3.Visibleoptionalfilterpanelvisibleoptionalfilterpanel用于打开和关闭骨骼和槽位的可见、可选、是否继承编辑开关，如图5所示。图5·Visible：开启时，骨头或窝在主场景中可见；当它关闭时，骨骼或窝在主场景中是不可见的。·可选：开启后，可以在主场景中选择骨骼或插槽；关闭时，无法在主场景中选择骨骼或插槽。·Inherit：开启时，骨骼或socket会继承父骨骼的编辑；关闭时，骨骼或插槽将不会继承父骨骼的编辑。4.变换面板变换面板用于显示和修改骨骼或窝的X、Y坐标（相对于父骨骼）、缩放、旋转角度和图像大小（仅适用于窝和图像）。变换面板如图6所示。图65.场景树面板场景树面板用于显示和编辑主场景中骨骼和插槽的父子树关系，如图7所示。图7右上角分别是：智能滤镜、骨骼创建按钮和删除按钮。在骨架组装模式下，双击场景树中的骨骼或插槽会弹出重命名窗口。此面板在骨架索具和动画下均可见，但在动画下不可编辑。可以在场景树中检查骨骼和插槽。以下是场景树中骨骼继承关系的编辑：·可以在场景树面板中通过拖拽改变骨骼之间的继承关系。·可以将子骨骼拖到同层或父骨骼之下及之上的骨骼上。·父骨骼不能被拖到它的子骨骼和它下面的骨骼。6.层级面板层级面板用于显示和编辑主场景中插槽的上下层级关系。插槽之间的层次关系可以通过拖放来改变。选择插槽后，也可以点击右上角的上下按钮或快捷键【】改变层级关系。该面板仅出现在骨架装配模式中。层次结构面板如图8所示。图87.资产面板项目使用的所有图像都保存在资产面板中。每个DragonBonesPro项目的资源库都对应一个系统中实际存在的文件夹，文件夹中DragonBonesPro支持的PNG图片会显示在资源面板中。通过将系统其他文件夹中的PNG文件拖到DragonBonesPro的资源面板中，将图片添加到资源库中；相应的PNG文件也将被复制到相应的资源库文件夹中。也可以点击“导入资源”按钮，在弹出的系统窗口中指定要添加的资源PNG文件。资源面板如图9所示，图9右上角的按钮分别是：导入资源按钮、打开库文件夹按钮和修改路径按钮。该面板只能在骨架组装模式下显示。8.编辑模式切换按钮编辑模式切换按钮位于场景的左上角，用于骨骼组装和动画制作之间的切换，如图10图109.动画面板Animation面板用于显示和制作动画编辑动画片段，如图11所示。图11右上角的按钮分别是：新建动画片段按钮、克隆动画片段按钮、重命名和删除动画片段按钮。该面板只能在动画下显示。动画面板下方的三个参数分别是：·动画时间：不可编辑，单位为秒。动画剪辑的实际持续时间是根据帧速率和动画剪辑的总帧数计算的。·过渡时间：默认值为0，可编辑，单位为s。用于设置游戏中不同移动表面之间的过渡时间。·播放次数：默认为0，可编辑。用于设置游戏中动画的重复次数。当设置为0时，表示无限重复。10.时间线面板时间线面板用于编辑动画片段。该模板只能在动画制作下显示，如图12所示。图12·播放控制工具时间轴面板上的播放控制工具用于控制动画片段的播放。从左到右依次为：返回第一帧按钮、上一帧按钮、倒放按钮、播放按钮、下一帧按钮、最后一帧按钮、播放速度控制滑块、当前帧、当前时间、帧率，如图13所示。播放速度控制滑块的控制范围为0.1x~10x。当前帧：可编辑，输入具体的帧号，绿色播放指针会跳转到对应的帧号。拖动绿色指针或播放动圈，当前帧的数值会随之变化。当前时间：不可编辑，根据当前帧和帧率计算。帧率：可编辑，默认为24fps。设置每秒动画帧数，如图13所示图13帧编辑工具栏帧编辑工具栏，从左到右依次为：删除不需要的帧、编辑多帧、洋葱皮按钮、向右移动帧、移动帧向左，自动关键帧按钮，曲线编辑器，如图14所示。图14删除不需要的帧：自动检查并删除整个时间轴中不需要的关键帧。删除不需要的关键帧可以在不影响动画渲染效果的情况下对动画文件进行瘦身。洋葱皮按钮：切换洋葱皮功能。编辑多帧：多选帧可以批量编辑曲线。左移关键帧、右移关键帧：单击该按钮可将所有关键帧移动到所选关键帧的右侧（左侧）。如果左边上帧已经有关键帧，则无法向左移动，将关键帧向左移动的按钮会变灰，右边也一样。自动关键帧按钮：该按钮有两种状态切换，白色为关闭，红色为开启。启用后，对骨骼或插槽的更改将自动在绿色播放头所在的帧以及相应的骨骼或插槽层上添加关键帧。CurveEditor：CurveEditor在此面板中，您可以为帧到帧补间应用程序实现不同的补间效果。·时间线工具栏时间线工具栏，从左到右依次为：折叠列表、展开列表、复制帧按钮、剪切帧按钮、粘贴帧按钮、删除帧按钮，如图15所示。图15折叠列表：折叠时间线上的所有图层.展开列表：展开时间轴上的所有图层。复制帧按钮：选中一个关键帧，点击该按钮后，该帧的参数将被复制到剪贴板。切帧按钮：选中关键帧，点击该按钮后，该帧的参数将被剪切到剪贴板。粘贴帧按钮：剪贴板中的帧参数可以粘贴到时间轴的任意帧号和任意层（骨骼层和插槽层的帧不能相互粘贴，关键帧记录的参数是相对于前一个关键帧的变化值，0帧的相对变化值为0），也可以覆盖已有的关键帧。删除帧按钮：删除当前选中的帧。添加关键帧按钮：这个按钮有3个状态按钮，白色表示没有变化，没有关键帧。黄色表示有变化，没有添加或更新关键帧。红色表示没有添加任何更改或更新关键帧。在白色或黄色状态下，点击该按钮可在绿色播放指针所在帧及对应的骨骼层或插槽层处添加或更新关键帧。在红色状态下点击没有效果。在红色或白色状态下，改变骨骼或窝，按钮会变成黄色，表示骨骼或窝已经改变。未选择骨骼或插槽时，此按钮不可用。图形面板按钮：切换图形面板。·时间轴缩放工具时间轴缩放工具用于控制时间轴的缩放比例，如图16所示。左侧为适合屏幕按钮，—和+按钮控制缩小和缩放中。拖动滑块也可以控制缩放。如图16所示。图16.洋葱皮工具洋葱皮功能开启后，会同时显示前后N帧（默认为3帧）的阴影图像，方便动画师使用以更好地定位角色的运动并使连续动画更加流畅。进入动画模式，点击时间轴工具栏上的洋葱皮按钮，开启洋葱皮功能，如图17所示。图17洋葱皮功能开启后，蓝色（前导帧）和红色（后续帧）阴影主场景动画中出现图像，动画呈现阴影图像效果，如图18所示。图18同时，时间轴上会出现绿色的播放指针。默认覆盖3帧的洋葱皮显示区域，左侧调整手柄为红色，右侧调整手柄为蓝色，如图19。图19拖动蓝色或红色手柄调整数量蓝色或红色洋葱皮显示的帧数。覆盖的帧越多，主餐中显示的阴影图像就越多。葱皮显示区域会随着绿色播放指针的移动而移动。动画播放时，绿色播放头上的洋葱皮显示区域被隐藏。在主场景中，红色和蓝色阴影图像会随着原动画一起播放，蓝色阴影图像的动画动作超前于原动画，红色阴影图像的动画动作滞后于原动画。洋葱皮特点：蓝色或红色洋葱皮显示区域不能超过动画片段本身的长度。虽然默认情况下动画片段是循环播放的，但是当绿色播放指针在第0帧时，主场景中没有红洋葱皮影显示。当绿色插入指针在最后一帧时，主场景中没有蓝色洋葱皮影显示。·时间轴骨骼层关键帧为白色，槽层关键帧为黄色，事件层关键帧为红色，包含事件、跳跃、声音的骨骼关键帧为粉红色。时间轴的第一层是动面层，不能直接编辑。将关键帧添加到任何其他层后，动画剪辑层中会出现一个菱形方块，表示当前帧下一层或多层中有关键帧。白色代表骨骼层关键帧，黄色代表槽层关键帧，红色代表事件层关键帧，粉色代表多层混合的天空关键帧。选中菱形方块，选中该帧号下的所有关键帧。您可以进行整体的左右平移、拖动、复制、剪切、粘贴和删除。只要对应帧号下有关键帧，时间线标尺上就会出现一条红线，时间线标尺会随着时间线的上下滚动条滚动，一直可见。时间轴的第一层是骨骼层或事件层，第二层是槽层，槽层在骨骼层的右边缩进一层。父子骨骼之间的层级关系不反映在时间轴中。事件层只有一层。所选图层将高亮显示，相应图层的骨骼或窝也将被选中。反之，如果骨骼或窝被选中，相应的图层也会被选中。关键帧可以在时间轴的同一层内任意拖动。时间轴面板如图20所示。图20·CurveEditorCurveEditor在这个面板中，可以对帧与帧之间的补间实现不同的补间效果。比如你想让一个角色在奔跑动作中摆臂先快后慢，那么你可以在摆臂动作的前两个关键帧中选择第一个关键帧，然后点击曲线按钮时间线如图21所示，打开曲线编辑器面板。图21默认在关键帧之间使用线性补间。在曲线编辑器中它是一条直线。面板下方可以看到一排按钮，是工具中预设的一些缓动效果，如图22所示。图22点击这些按钮可以快速将曲线变为相应的效果，从左到右依次为：无补间、线性补间、说话、说话、淡入淡出（淡入表示先慢后快，淡出表示先快后慢，淡入淡出表示一快一慢），如如图23所示。图23如果对这些预设的效果不满意，也可以通过拖动曲线两端控制条上的控制点（白色空心点）自由调整曲线，如图图24.目前控制点只能在100%到200%之间调整，此限制将在未来版本中解除。当曲线进入负值区域时，表示动画先向反方向运行一段时间，然后再向前运行。超过100%的曲线表示动画会跑到目标位置之外，然后反转到目标位置。图24中值得一提的是，曲线的编辑效果可以实时体现在场景的动画中，设计者可以在播放动画的同时调整曲线的预览效果。此外，对曲线的调整会立即改变动画数据，设计者无需再次点击关键帧按钮来确认修改。如果对修改效果不满意，可以使用撤销功能返回修改前的状态。3.新建动画工程DragonBonesPro提供了方便快捷的工程。1.新建工程在欢迎主页打开新建工程，会弹出对话框，选择创建龙骨动画，如图25。图25点击CreateKeelAnimation，会出现如下选项：Skeleton动画模板、逐帧动画模板、补间动画模板、自定义，如图26所示。图26点击相应的模板，在创建栏中选择相应的模板。它们只是参数不同，但功能是一样的。也可以在创建项目后在资源中右击，会出现一个新的组件，如图27。图27点击新建一个组件，也会出现如图所示，如图图28.图282.添加和删除图片将资源库中的图片拖放到主窗口中：如果没有选中图层或选中图层的当前帧有非空关键帧，将出现以图片命名的图片自动添加到时间轴层。·如果图层被选中，当前帧没有关键帧，则当前帧添加一个关键帧，图片添加到关键帧。·如果图层被选中，当前帧为空关键帧，图片会被添加到空关键帧，空关键帧变为非空关键帧。3.图层顺序您可以在时间轴中拖放以更改图层的堆叠顺序。4.项目导入导出导入项目DragonBonesPro目前支持导入多种格式的DragonBones数据文件（包括json和xml）和数据包文件（包括png和zip）。另外，DragonBonesPro支持通过导入插件对导入的数据进行扩展。格式。官方发布的Spine2.x导入插件和Cocos1.x导入插件可以帮助DragonBonesPro导入Spine和Cocos数据文件。导入方法非常简单，只需将要导入的数据文件或数据包文件拖放到软件中即可。如果导入的是数据文件，会出现如图29所示的界面。图29软件会在数据文件所在的日记中智能搜索纹理集文件。如果找不到或者找错了，记得手动修改路径，不然会找不到图片。如果导入的是数据包文件，就不会出现找不到贴图集的情况。另外软件会自动生成项目名称，需要修改的可以手动修改。DragonBonesPro可以将项目导出为json或xml格式，图片可以是纹理集或图片文件的形式。导出窗口如图30所示。图30默认输出路径为“我的文档+项目名称”，用户可以手动指定。如果导出zip包，包文件会出现在指定的输出路径下。如果导出工程文件夹，会在指定的输出路径下创建一个与工程同名的子目录，其中包含数据文件和图片。输出比例默认为1。用户可以输入一个值来控制导出项目的比例。“填充颜色”复选框，默认不勾选（透明背景）。勾选后，用户可以点击右侧的颜色方块，打开颜色选择窗口，选择需要使用的颜色作为背景色。“打包zip”复选框，默认不勾选，即导出工程文件夹。勾选后会导出zip包形式的工程文件。下面将psd文件转换成DragonBones数据文件。DragonBonesProPSExportDB,jsx安装目录下提供了一个脚本文件。用于将Photoshop中的设计图导出为皮肤DragonBones格式数据+图片。注意：Mac系统需要在应用程序中找到DragonBonesPro.app，然后右键选择显示包内容。脚本文件在/Contents/Resources/DailyRecords下，导出方法如下：在Photshop中打开设计图，然后在菜单中选择命令“文件—>脚本—>浏览”，然后在打开的系统定位示例找到PSExportDBjsx文件，选择Open，会弹出如下对话框：ExportPNGs导出图片ExportISON导出json文件IgnoreHiddenLayers忽略隐藏图层ImageScale整体缩放比例根据需要设置，点击确定按钮Photoshop会开始导出，导出完成后，会在设计图所在的日记本下生成一个名为DragonBmes{PSD文件名}的目录。如果同时导出检查PNG和JSON，会出现一个与psd文件同名的json文件，其下还有一个Textuer目录。Texture下面都是png图片文件。之后，只需将导出的数据文件拖入DragonBonesPro中设置图片日记，即可完成导入。导入后图片的相对位置、大小、层次关系与Photoshop中完全一致。怎么样，通过这篇文章，你学会了DragonBonesPro工具的基本使用和骨骼动画中的常用术语了吧？如果您有任何技术问题或觉得本文对您有帮助，欢迎留言交流。
