1个小时学会一个动画软件Spine，我又多掌握了一个技能
最近在项目里有需要用到2D角色动画，不仅仅是简单的角色动画而已，还希望支持用户动态换装，这个用AE就不好实现了。所以，我这次要用到新软件叫做spine，一个专门做2D动画的软件。今天的文章会对这个软件的使用流程做一个详细介绍，建议收藏，又多学会一个技能。
项目要得很急，从我听说这个软件到交稿，只给了几天的时间。结果我从下载软件到学会用到项目中，总共就用了大概4个小时，我相信大家看完我的文章能在1个小时学会！所以大家放心，这个软件不难，而且肯定比AE那个骨骼插件duik方便好用，所以特别推荐大家去学下这个软件，做点有意思的动画。
虽然我是第一次听说这个软件，但它其实在游戏领域已经是一个很成熟的软件了，只不过更多的用在2D游戏中，现在其实还有蛮多游戏公司在招spine这块的动画人才。
第一次看到这个软件名的时候，还以为是写错了，以为是spline，之后才发现两个其实是完全不同的软件。Spine可以方便做出2D角色动画并可以导出json文件直接用到游戏中，而Spline是一款3D设计软件，两者定位是完全不同的。
Spine能实现很多复杂动画效果，比如可交互动画、过渡动画、网格变形、序列帧、换肤、反向动力学、混合动画、路径约束动画、动画裁剪等等。
序列帧动画
网格变形动画
换装动画
反向动力学动画
路径动画
裁切动画
spine做出来的动画体积小精度高
分享下我看的教程资源：https://www.youtube.com/channel/UCe8Y6zWp4RndCVZxcp81IvA。当然，这套教程时长比较久，想要快速学会看我今天这一篇文章应该也能快速掌握要领了。
spine动画的整体制作流程分4步：
这里用一个我当时花几个小时学完后做的案例来跟大家演示下，做的还比较粗糙，主要看大体的制作流程就好。
1.角色及分镜设计
在这一步，你需要想清楚自己要做怎样的动画，画好动态分镜，并且确定好视觉元素。在画角色的时候，记得把身体各部分需要做动画的地方进行分层，包括装饰性元素都进行分层，分层是为了第二步的分割切图。
2.对原画进行拆图
在spine的流程里习惯叫拆图，其实跟UI里的切图有些类似，就是把需要做动画的元素进行切割，然后利用一个spine PS导出插件进行导出，就可以在sping中进行动画设计了。
这一环节大概也分几个小的步骤：
1）拆图。在需要动画的地方进行分割。分割的颗粒度取决于你需要把动画做到多细腻，越细腻的动画拆分的就越细。
画红圈的地方拆分的部位示意
2）补图。补图之后可以用ps里的旋转测试下是否会穿帮，如果有穿帮的位置需要把遮挡部分补完整。因为切图后可能会对某些关节做动画，旋转后后面的图层会有空缺，或者被拉伸。所以这一步很关键，也是在做其他动画时不大会考虑的步骤。
3）整体图层顺序。除了补图造成的穿帮，图层的前后关系也容易造成穿帮，尤其注意前后的遮挡关系，包括旋转后的穿帮问题，比如手转动后会跟身体穿插等等。
4）图层命名。对图层进行命名，且不要有中文，所有图层不可以有重命名，这点尤其需要注意，不然会有Bug
5）尺寸统一。注意图片资源的大小比例尽量保持一致，不然后面都需要再次调整
3.分布网格
从PS中导出来的资源，可以通过导入数据直接在spine中打开。在spine中第一步是需要把切图资源进行网格设置，分配好网格后才能进行绑定和权重分配。
类似于3D建模中的顶点分布一样，点越多，动画可以更细腻，但同时就越难调整。把需要转面和变形比较多的地方，可以把网格点分布的更多一些。
比如腿部的动画我希望可以更细腻，分配的点就更多一些，贴纸的动画比较少，所以只要把边缘加上点就好了。在做描边的时候，尽量包裹紧物件，不要外延太多，以免没必要的性能消耗。
4.角色绑定
网格分布完成后，就可以开始进行骨骼绑定了，跟3D的流程有些类似，只不过从3D变成了2D，所以相应的难度也低了很多。我因为有3D绑定的经验，所以这里理解起来就觉得特别简单了，相反，如果大家觉得3D的绑定流程比较难理解，正好可以通过这个软件把绑定权重的概念做一个学习。从2D入手再到3D，相信就更容易掌握了。
1）加骨架
给模型建立骨架。我一般是先从腰部开始先建立一个根骨骼，然后按照需要对身体进行骨骼创建。对于人体来说，你可以想象下自己的身体每一根关节的位置这样去创建骨骼。我建议可以边建立骨骼边做好命名，不然到后面你还要重新去找哪个骨骼对应哪个，就比较麻烦了。
骨骼的父子级关系在创建的时候有个小技巧，需要哪个骨骼作为父级就选中哪根骨头，然后再创建，骨骼就能自动作为子集了。
图中蓝色的棍子就是骨骼了
2）绑定
骨骼创建好了之后，就可以选中对应的切图网格进行绑定，鼠标左键就可以选择需要绑定的骨骼。原则就是你希望哪根骨头可以影响它就选择它，一定要注意影响范围。
选择好了之后按空格就可以确认绑定，然后spine会自动分配一个权重，但这个权重往往是有问题的，所以需要对每个顶点进行检查。
3）刷权重
选中有问题的顶点，重新进行手动权重分配，可以选中需要修改的点鼠标上下拖动修改权重。每次修改后，都要测试下有没有问题，一点点地调整直到全部权重没问题即可。
注意，这一步的权重一定要刷仔细，因为这会直接影响到后面的动画，如果K的不够仔细可能会出现反复修改的情况，很浪费时间。
4）做IK
做IK控制器的目的主要是为了方便做动画，比如一个行走的动画，如果没有IK的话你可能需要调整多根骨头，这样做一方面很难调整的自然，另一方面也会很麻烦。
类似于3D中的IK控制器，做好后动画就非常方便了，只需要调整IK就可以一次性控制多根骨头的运动。但在spine中要注意的是，一次只能设置最多2根骨头的IK链，所以要做好IK的层级关系。
4.K动画
一切准备就绪，咱们终于来到了做动画的环节。在spine中做动画其实类似于AE的K帧（K帧是绝大部分软件做动画的基础，3Dmax,maya,c4d,blender都是这样），操作起来也很简单。但想要把动画做好，主要靠的还是对于动画节奏和美感的把握，软件技巧倒是其次的。
这里也有几个步骤，我在做demo的时候研究的：
1）K大型
先K好大的关键动作，比如循环动作中的首尾帧，中间帧，然后由大到小，逐渐增加细节。
记得先把自动关键帧打开，防止中间有调整动作的时候忘记K帧，然后全选所有骨头，按command+L面对所有骨头进行K帧，按D可以进行播放。
其实这里的操作跟3Dmax里很像，我最近也是花了1天时间学了下3dmax的动画模块，然后用3dmax做3D动画，用spine做2D动画，原理性的东西都是一样的。
K大形的时候，有的时候也会遇到图层顺序穿帮的问题，可以在图层顺序那把图层顺序重新调整好。
2）补充动画细节
K完基本动作后，就可以往里面增加细节了。把一些主要动作摆好，然后预览查看是否有穿帮，如果有穿帮的地方要进行修复。
在这个时候，可能会发现有些权重细节是有问题的，此时需要你回到设置状态下调整权重。
3）调整动画曲线
因为spine会帮你做好自动的缓入缓出，但有时候你可能希望调整别的动画曲线，在这一步的时候，你就可以根据需要慢慢优化了。
4）添加补图
有时候状态变化过大，通过权重很难做到，最简单的办法是通过补图的方式来进行完善，spine中的图层也是可以K帧的。在同一个插槽中放2个状态的图片，通过左边的钥匙（关键帧）进行K帧，这些带有绿色钥匙的图标就代表可以K帧。
5）转面补间，如有
有时候还希望通过一张图来实现转面，这个操作会稍微有点麻烦，可以通过补图来做到。如果你不想补图，也可以通过调整顶点来模拟转面。这个属于略高级操作，感兴趣可以自己去找教程看看。
6）动画调优
最后，把资源都大致补齐后，可以整体再感受下动画的细节进行完善，比如进行错帧，调整节奏等等。
5.导出
Spine可以导出多种动画格式，有gif，mov等等，当然如果你想后续进行开发的话，一般是导出json，这里的设置很多，很容易踩坑。
Spine资源输出的时候，会遇到精灵图分散到几张图的情况，这样开发在打开文件时，仅能识别其中一张，造成图片资源链接错位。
这是我当时遇到的一个坑。问题出现的原因是Max width/height:输出图片的最大页面尺寸。如果图片大于此值,将分多页输出。这个尺寸太小导致的，修改最大尺寸至能放下所有精灵图就可以合并成1张图了。
最后看下最终的动画效果，简单做了下比较粗糙，仅作为示例：
总结
最后，我们总结一下，当学习一个全新软件的时候，要善于套用到自己熟悉的知识体系中，比如这个动画软件的制作流程在绑定权重阶段就跟3D流程很类似，那么就可以利用已有知识快速建立联系。
在软件学习上一直都不会很难，难的是学会一种能够快速迁移的知识体系。我最近又接触了不少新的软件，之前一直用C4D的我，又因为工作的原因要在很短的时间内要掌握3dmax和maya，大概1个软件1天的学习时间，然后就要快速在项目中使用。对软件作为工具这种体会就更深刻了，不能为了学软件而去学软件，要把它作为自己实现设计想法的工具，时刻培养自己快速学习的能力才是最关键的。
另外，关于这个动画软件更多实操学习，我也在星球里跟大家做了直播分享，想要继续学习和探讨的，可以加星球或微信与我交流。
星球直播实操演示截图
重要提醒：
本月末，将邀请星球里的插画打卡大佬，同时也是插画自媒体”mango今天画嘛呢“的主理人mango，为大家分享她的插画学习以及职业规划经验。详细介绍可以看下这篇文章《惊到我了！一个UI设计师居然把插画画的这么好，怎么做到的？》
星球优惠券还有剩余，扫码可以使用，不要错过！
![]()
最近彩云还弄了一个新公众号，会发一些这边看不到的内容，期待大家的关注订阅！
近期必读热门文章
《惊到我了！一个UI设计师居然把插画画的这么好，怎么做到的？》