今天这篇文章是最后一期，来讲一个案例：吉祥物变脸的骨骼动画制作。
文章大纲：
01 准备工作
02 骨架装配
03 动画制作
04 预览/保存
01.准备工作
画图
今天讲吉祥物变脸案例，那首要任务是把“吉祥物+脸谱”两个主要元素绘制出来，建议用PS绘制，方便分图层和导出，用AI也可以，稍微麻烦一点。如何设计企业吉祥物的思路以前文章有讲过，至于怎么画，我也是没有美术基础的小白，多画多练就对了，那这一步就省略了，大家自行发挥。
构思动画
我们绘制好角色元素之后，就需要构思动画了，而不是到动画制作的时候才开始考虑，这是为“分图层”做准备。今天这个案例需要考虑的动画效果有：眨眼、喘气、变脸。
想好动画效果之后，接下来的重要步骤是考虑动画实现原理，比如眨眼动作，眼皮，眼珠，眼眶的运动关系，以及眨眼时间设置。
那有没有一个简单的方法，让我们去了解不熟悉动画的运动规律呢？我一般去网站搜索相关gif动画，然后放到ps里一帧一帧的观察，找到图片变化规律之后模拟。
动画构思好了之后，我们进行下一步。
分图层
为什么要分图层呢？因为骨骼动画原理是图片的运动，分图层才能对图片单独做动画。比如一个抬手动作，大手臂，小手臂，身体都不能在一个图层里。至于哪些元素在同一个图层哪些元素不在同一个图层，这是由上一步，动画的构思决定的。
导入资源
完成基本造型的绘制并分好图层之后，就可以把图片资源导入到DragonBones Pro软件里了，需要注意的是：DragonBones Pro软件只支持从“PS：文件>脚本”，导出图片到DragonBones Pro项目里，不支持AI文件导出。具体导入步骤前面文章有讲过，这里不累述。
02.骨架装配
重点记住骨架结构，即：根骨头>主骨头>子骨头>插槽>图片/网格。
案例创建流程如下：
1. 首先要在根骨头下，创建一根主骨头，作为整个角色的父级结构，目的是方便对整个角色做位移。
2. 然后对吉祥物的头部，先创建一根父级骨头，再对头部所有要动的图片添加骨头，作为它的子级。案例里给脸谱、头顶的尾巴、脸两侧的吊挂物添加了骨头。
3. 接下来就是给身体先创建一根父骨头，再给大手臂、小手臂、折扇、披肩添加骨头，作为子级。
4. 最后一步，给脚创建骨头，案例没有跳跃动作，所以没有创建IK约束骨头。
只要把父子骨头的关系弄清楚，骨架装配这一步也很简单。
03.动画制作
眨眼动画
我预想的是在变脸之前有眨眼动作，并且利用插槽的图片切换来实现，所以我准备了三张眼睛图片如下。
因为眼睛的三个状态不会同时出现，所以刚好可以给插槽K帧来实现。首先在0s处，给眼睛插槽K帧，保持正常状态，显示图片3；在20s处切换图片，显示图片2；22s处切换图片，显示图片1。为了保证动作连贯，需要把之前创建的帧倒序重复一次，所以在24s处，显示图片2；26s处显示图片3。
眨眼都是快速动作，所以时间间隔要小，这里我设置的是2s。还有一点需要注意，眨眼的时候，不仅是眼睛有变化，还有脸部，因为吉祥物的脸是一张脸谱，有色彩，眨一下眼睛，肉皮会跟着上下运动。像肉皮这种细微的动作怎么来实现呢？
那就需要运用网格了，网格的创建是在骨架装配模式下，属性面板里编辑。创建好网格之后，在动画制作模式下K帧，我们先在场景树面板选中网格图片，在0s处，属性面板里对网格先K帧，这是默认状态；然后在20s处，也就是对应到眼睛的关键帧之下，用鼠标向下拖动眼睛上面的网格点，然后K帧。根据生活经验，闭眼时肉皮向下拉，睁眼时肉皮向上叠在一起，然后K帧就可以了。
喘气动作
因为吉祥物是拟人化的，当站立的时候，不可能静止不动，那喘气的动作怎么实现呢？这个其实很简单，利用骨头的位移和旋转就能实现。我们知道，人在吸气的时候，身体有轻微向上，四肢向身体靠拢；呼气的时候，身体轻微向下，四肢舒展开。根据这个常识，可以按照如下设置：
呼气时
我们先设置呼气，因为呼气是默认状态，不需要设置参数，找到呼气结束的时间，K帧即可。这里需要K帧的对象有：身体主骨头、尾巴、披肩、帽子的悬挂物。
吸气时
吸气应在呼气之前，设置参数如下：
身体主骨头： y轴位移数值减小
尾巴骨头：顺时针旋转
披肩骨头：靠拢身体旋转
帽子悬挂物骨头：靠拢身体旋转
基本上喘气动作设置完成，可以再复制一组，让动画更连贯，至于具体参数可以灵活设置。
变脸动作
这是今天案例的主要动画，因为时间有限，所以我这里制作的效果有点粗糙，想要有更细腻效果的话，可以把手臂动作拆分几步，创建更多关键帧。
因为也没制作过这个动画效果，我就去网上搜索相关川剧变脸的gif，在PS里删除了多余的帧，研究一番之后，我找到了一些规律： 抬手臂—手臂旋转—折伞旋转并放大—同时身体轻微下蹲—低头—脸谱切换，然后整个过程重复一次，变脸动画能基本实现。
哈哈哈~~最终效果有点糙，大家将就一下，其它细腻的地方需要花时间调节啦。
gif格式颜色和时间有误差
04.预览/保存
动画编辑器里可能存在动画抖动现象，这时需要在预览模式下检查，如果没有抖动现象，说明我们制作的动画是没有问题的。
检查完之后，就可以点击保存啦，最后交给开发就完成任务了。
总结
对于动画制作，我的感受是：动画制作很简单，但是动画的构思很重要，以及对动作细腻程度的把握，需要对生活多观察和思考。
本文地址：
http://www.njanyou.cn/news/1321.html
Tag：
交互 动画
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
盘点2017那些曾经刷屏的花式营销
下一篇：
隐藏重定向导致的SEO风险
