简介
骨骼动画顾名思义就是用通过骨骼来控制模型动起来。可以类比于人体运动，人要动起来就需要控制人体的骨骼带动躯干来完成动作。那么骨骼动画就是通过控制骨骼移动、旋转、缩放来带动皮肤运动。
常见名词
- 骨架：骨架是骨骼的集合，骨架中至少包含一个骨骼。一个项目中可以包含多付骨架
- 骨骼：骨骼是骨骼动画的基本组成部分。骨骼可以旋转，缩放，平移
- 插槽：插槽是图片的容器，是骨骼和图片的桥梁。主场景中，图片的层次关系由插槽在层级面板的层次关系体现
- 图片：图片是最基本的设计素材，项目所需的图片都放在资源面板里
- 继承：父子组件间存在继承关系。父子可以是骨骼和骨骼，也可以是骨骼和插槽。子组件会继承父组件的移动，缩放和旋转
- 网格：网格可以用来实现图片的任意变形和扭曲
- 蒙皮权重：蒙皮是指将网格点绑定在指定的骨骼上，基于绑定时分配的权重，网格点随着骨骼的运动而移动。蒙皮使得繁琐复杂的网格点操作只要通过简单的骨骼操作便能实现
以上说完了名词，可能不太能理解。只是先大概了解一下有这么几个概念，然后看完下面的一个小demo，就都明白了～
设计一个简单的骨骼效果 - DragonBones
我学习制作骨骼动画，用的是DragonBones，因为这个工具免费，而且操作起来还挺方便的，现在就用这个工具来制作一个小效果吧～
ps：不是专业设计师，做的丑丑的勿怪，了解一下怎么玩的就好，嘿嘿～
先看一下最终的呈现结果吧～分析一下这个效果有三个部分是动态的，左右手在摆动，左脚在幌动，让我们来看看咋做的吧
创建一个龙骨项目
创建龙骨动画 - 骨骼动画模版
资源导入
在这里现将考拉的各个部位的素材导入进来，我这里将考拉分解的成了下肢、左右手、头部、配饰
构建骨架
- 这里的场景树就可以理解为骨架，骨架至少需要一个骨骼（如图一）
- 根据考拉的结构创建骨骼(头、手、身体) ，头部包含了嘴巴和蝴蝶结，按照层级创建骨骼（如图二）
- 骨骼中创建插槽放置图片（直接将资源中的图片拖拽到插槽就可以了～）（如图三）
- 最终完整的骨架就ok了（如图四）
调整位置、层级
- 图片默认位置都在中心，所以图片都是重叠的（如图一）
- 通过拖拽了调整躯干的位置、大小（如图二）
- 看到手臂应该在身体下方，头部应该在身体上方，需要调整图片层级，拖拽图片的层级顺序即可调整（如图三）
- 最终考拉的形象就ok了（如图四）
动画制作 - 手臂摆动
- 切换看板为动画制作（如图一）
- 选择右手骨骼，在时间轴中选择一个时间，快捷键（k）创建添加关键帧（如图二）
- 拖动关键帧，这里右手摆动20度，然后还原位置，制作完成后点击播放预览（如图三）
- 同理制作左手动画，完成后，左右手就会出现摆臂的效果了
注意：骨骼的位移和角度是相对「父骨骼」（的坐标系）而言的
动画制作 - 脚摆动
以上就完成了一个图片简单的旋转，同比其他场景，例如风车转动这些都可以这样实现，但是脚要摆动，直接让整个下肢旋转很明显是不行的，头和脖子要脱节了，这时候我们就需要使用高级功能网格、蒙皮权重了
- 切回到骨骼装配看板，点击body插槽，左侧出现配置选项，将网格勾选上，编辑网格，这里可以新增和删除网点
- 将考拉腿部周围均匀的增加网点（如图一）
- 新增骨骼，右上角创建骨骼，然后将身体，新增三个骨骼：躯干、左腿、右腿
- 切换选中模式，点击身体，左侧编辑去，添加绑定骨骼（如图二）
- 点击任意一个顶点，就可以看到三个骨骼对他的控制权重（如图三）
- 切到动画模式，选中左腿的骨骼，然后旋转骨骼20度，还原，制作骨骼动画
- 腿部的动作就制作完成了～
以上一个简单的骨骼动画就制作完成了～
一个项目可以创建多个骨架，一个骨架可以创建多个动画，这些功能大家就自己去探索吧～
导出文件结构分析
导出后会有三个文件
tex.json
是对图片资源的描述，每个图片的名称、宽高、位置
tex.png
导入的图片资源会合成的一个雪碧图
ske.json
骨骼动画文件
蒙皮原理分析
所谓蒙皮就是计算骨架在某一状态下网格顶点的位置
上图可以看到，左侧的圆它是由一个骨骼并且在圆心进行控制，那么影响这个圆移动、缩放、旋转的就是这一个骨骼，在设置骨骼想做移动100时，对应的整个皮肤的顶点都是（1*100），也会移动100比较好理解。
右侧的图它包含了顶点骨骼以及其子节点-下骨骼，我们在看一下这个圆的网格，左下角的顶点他的权重骨骼分布是，那么设置下骨骼动画，向右移动100时，我们的左下角的顶点其实移动是（033%+10066%）的距离，同理左上角的顶点（067%+10032%）其他的顶点如此计算，这样就可以做到蒙皮的变形了～
举一反三，如果一个皮肤由多个骨骼控制，那么他的顶点随着骨骼运动，顶点的最终变换就等于它所绑定的骨骼变换的加权和。
对于每个顶点，我们需要有以下信息
- 该顶点绑定到的骨骼索引
- 该顶点的每个绑定骨骼的权重，他表示了骨骼对顶点的影响力。
加权平均的计算时，顶点绑定的所有骨骼的权重和为1
资料 & 文献
-
DragonBones学习文档
-
DragonBones下载地址
