交互动画之—骨骼动画制作
这一期主要讲骨骼动画制作软件DragonBonesPro，下一期讲案例。
文章大纲01 软件下载和安装
02 导入资源
03 骨架装配
04 动画制作
05 预览
06 导出
总结 资源
DragonBonesPro编辑器熟话说工欲善其事必先利其器，就是说要先把工具用好，那接下来我们讲DragonBones Pro软件相关操作吧。
01软件下载和安装去官网http://dragonbones.com/cn/index.html下载安装即可，支持Win和Mac两个平台。
02导入资源支持从“PS：文件脚本”，导出图片到DragonBones Pro项目里，不支持AI文件导出。
怎么给PS添加DragonBones Pro的脚本呢？
打开DragonBones Pro软件，在顶部的菜单栏点击帮助， 选择“PSD导出插件安装引导”，按照引导的步骤操作即可。然后在PS里画好角色造型，在“文件脚本”里把PSD图层导入到DragonBones Pro软件里即可制作动画。
导出到数据：即把PSD图层导出为.json数据文件，它可以在DragonBones Pro中打开，然后制作动画。
导出到DragonBones Pro：即直接导出图片到软件中制作动画。
需要注意的是：
每一个要动的部位都要分图层，比如眼球要转动，就要把眼眶和眼球分层。建议用PS绘制角色，一定要用AI的话，也要分层绘制，转为PSD文件才是分图层的。DragonBones Pro软件界面的两个主要操作：骨架装配和动画制作。
03骨架装配骨架装配模式，主要是用于创建骨头，并绑定到图片上，最后组成骨架结构。
骨架装配有层级结构，即，根骨头骨头插槽图片。图片就是PSD里的图层；插槽就是存放图片的容器，为什么要多添加插槽这一层结构呢？目的是让骨骼动画更灵活，也是数据结构决定的；骨头是骨骼动画的关键元素，作用是把图片绑定到骨头上，再对骨头K帧，就能实现动画效果；根骨头就是多个骨头关联起来组成的父级结构。其实骨骼动画和我们身体的结构类似，身体骨头关节肌肉。
需要注意的是：
图片不能单独存在，一定要有插槽才能放图片，一个插槽下可以放多张图片，但同一时刻，只能显示一张，插槽是在骨头层级之下。
在骨架装配模式下的主要操作是：先创建骨头，并把骨头绑定到图片上，然后调整骨头的相关参数。
步骤一：创建骨头点击“创建骨骼”工具，在窗口里拖动，就能完成骨骼创建，继续拖拽，默认创建它的子骨骼，如果不想创建它的子骨骼，右键单击空白处，取消选择创建的骨骼即可。创建骨头这一步需要注意的是父子级关系，在创建骨头之前，就要想好。
所有骨骼都是基于根骨骼创建的，且根骨骼不能删除。场景移动：按住鼠标右键拖拽。
步骤二：绑定图片分为自动绑定和手动绑定。自动绑定：在图片上拖拽创建骨头， 骨头划过的图片默认就绑定这个图片。
手动绑定：创建骨头之后，在场景树面板，手动把图片拖拽到骨头层级下；或者创建骨头时，不松鼠标，按住ctrl，鼠标点击选择图片也可完成绑定。上面我们说了插槽不能单独存在，所以图片绑定成功的同时会自动创建一个插槽。
步骤三：骨头操作骨头有三个基本参数：位移、旋转、缩放，在窗口底部的面板就能更改这些参数。默认情况下，更改父骨骼的参数，子骨骼也会被更改，这个时候需要关闭子骨骼可控，就能实现父动子不动。对于已绑定骨头的图片，想要移动骨头和图片的相对位置，就需要关闭子图片可控，单独更改骨头的位置。
骨架装配功能也很简单，重要步骤就上面三个，动手操作几次就熟悉了，下面来说另外一个动画制作模式。
04动画制作“动画制作”模式的主要功能是创建关键帧并制作动画。
时间轴面板和AE/Flash软件是一样的，通过K帧创建补间动画，以及复制删除关键帧等操作。
有两种方式K帧：手动+自动。
手动：快捷键是K，或者点击相应面板的小旗图标，红色表示已创建关键帧，黄色表示有参数更改，但是未创建。
自动：在时间轴面板开启带A的小旗图标，只要参数有修改，就会在时间轴的对应位置上自动创建关键帧。
DragonBones Pro软件能创建关键帧的面板有三个，因为K帧的对象不同，参数也不同，所以能实现丰富的动画效果。
参数面板：针对骨头K帧，有移动、旋转、缩放三个参数。
层级面板：针对插槽K帧，只能改变插槽层级关系。
属性面板：可针对插槽和网格K帧，插槽有颜色，不透明度，显示资源三个参数可以K帧；网格只有网格点的移动可以K帧。
上面说可以对骨头、插槽、网格K帧，那具体怎么来制作动画呢？
骨头动画即对骨头K帧，主要用于肢体动作、角色移动、转身等效果。参数有：移动、旋转、缩放。只需选中骨头，在时间轴面板的某一时刻，更改参数，创建关键帧，即可完成骨骼动画的制作。
插槽动画即对插槽K帧，通过切换图片显示和更改图片颜色制作动画，很适合做闪电特效，比如两个角色打斗产生的刀光剑影，就可以通过快速切换图片和更改颜色表现出魔幻的视觉冲击。只需选中插槽，在属性面板更改参数并K帧，即可创建插槽动画。
网格动画即对网格K帧，在图形上创建网格点，相当于钉锚点，锚点移动使图片变形，就能实现灵活的动画效果。网格动画也在属性面板创建关键帧，但编辑网格要在骨骼装配模式下。只需选中网格，鼠标拖动锚点然后K帧，即可创建网格动画。
再来拓展讲一种特殊的动画形式：
IK动画正常情况下，我们创建的骨头关系叫正向约束FK，也就是父骨骼控制子骨骼。IK叫反向约束，是子骨骼控制父骨骼，它是骨骼动画的特殊形式，用来实现下蹲、站立的动作，因为下蹲和站立是由脚掌骨头或手掌骨头带动父骨头大腿或手臂运动的，所以需要IK反向约束来实现。
IK动画的创建：骨架装配模式下，属性面板的”IK约束”有两个图标都可以创建。它最多给两个且为父子关系的骨头创建约束，一根骨头也可创建。IK约束只是一种特殊的骨头形式，对其K帧和普通骨头一样。
嗯，基本的动画制作就讲完啦。
05预览在软件窗口顶部有一个预览图标，点击即可在网页预览，窗口右侧还有预览设置。需要注意的是，我们在制作动画时，在时间轴上预览可能会出现抖动现象，这个时候需要在预览里查看是否有抖动，如果没有，说明动画制作没问题，如果有，说明动画制作有问题，需要修改动画。
06导出
在软件窗口顶部有一个导出图标，点击之后，可以选择保存的类型，一般情况下需要保存DragonBones json数据文件，或者gif文件以便于传播查看，但是非常不建议保存gif格式，因为会造成丢帧和颜色误差，且文件资源很大，建议保存HTML文件代替gif，效果会更好。
总结到这里骨骼动画的基本知识点都讲完了，下期讲一个小案例吧。
资源DragonBones官方教学视频：
软件操作文档：
http://developer.egret.com/cn/github/egret-docs/DB/dbPro/introduction/introduction/index.html
可下载的动画案例源文件：
http://t.egret.com/work/2-0.html
番茄设计匠（公众号）
作者：番茄
AE绛旓細浜や簰鍔ㄧ敾鎸囧湪鍔ㄧ敾鎾斁鏃舵敮鎸佷簨浠跺搷搴斿拰浜や簰鍔熻兘鐨勪竴绉嶅姩鐢伙紝鍗崇敤鎴锋槸鍙互鍜屽姩鐢讳骇鐢熶簰鍔ㄧ殑锛岀敤鎴峰彲浠ュ弬涓庡埌鍏朵腑骞舵敼鍙樺姩鐢昏繍鍔紝骞堕渶瑕佷唬鐮佹潵瀹屾垚浜や簰鐨勬帶鍒讹紝鍙敤flash鍒朵綔瀹屾垚鍚庣敓鎴愪唬鐮併傛壂鐮佷綋楠 02楠ㄩ鍔ㄧ敾鎻忚堪2D浜や簰鍔ㄧ敾閲岄潰鏈変竴绉嶉噸瑕佺殑褰㈠紡锛氶楠煎姩鐢汇傚畠鏄敱浜掔浉杩炴帴鐨勨滈澶粹濈粍鎴愮殑楠ㄦ灦缁撴瀯锛岄氳繃鏀...
绛旓細鍦楠ㄦ灦瑁呴厤妯″紡涓嬬殑涓昏鎿嶄綔鏄細鍏堝垱寤楠ㄥご锛屽苟鎶婇澶寸粦瀹氬埌鍥剧墖涓婏紝鐒跺悗璋冩暣楠ㄥご鐨勭浉鍏冲弬鏁般傛楠や竴锛氬垱寤洪澶 鐐瑰嚮鈥滃垱寤楠ㄩ鈥濆伐鍏凤紝鍦ㄧ獥鍙ｉ噷鎷栧姩锛屽氨鑳藉畬鎴愰楠煎垱寤猴紝缁х画鎷栨嫿锛岄粯璁ゅ垱寤哄畠鐨勫瓙楠ㄩ锛屽鏋滀笉鎯冲垱寤哄畠鐨勫瓙楠ㄩ锛屽彸閿崟鍑荤┖鐧藉锛屽彇娑堥夋嫨鍒涘缓鐨勯楠煎嵆鍙傚垱寤洪澶磋繖涓姝ラ渶瑕佹敞鎰忕殑鏄埗瀛愮骇...
绛旓細楠ㄩ鍔ㄧ敾鏄竴绉嶉氳繃楠ㄩ绯荤粺鏉ュ疄鐜拌鑹叉垨鐗╀綋鍔ㄦ佸彉鍖栫殑鍔ㄧ敾褰㈠紡銆侭lender鏄竴娆惧厤璐逛笖鍔熻兘寮哄ぇ鐨勪笁缁村缓妯″拰鍔ㄧ敾杞欢锛屾敮鎸侀楠煎姩鐢荤殑鍒朵綔銆侻aya鏄竴娆句笓涓氱殑涓夌淮鍔ㄧ敾鍜屽缓妯¤蒋浠讹紝琚箍娉涚敤浜庣數褰便佹父鎴忕瓑棰嗗煙锛屽叿鏈夊己澶х殑楠ㄩ鍔ㄧ敾鍔熻兘銆俇nity鏄竴娆炬父鎴忓紩鎿庯紝涔熷彲鐢ㄤ簬鍒涘缓浜や簰鎬х殑楠ㄩ鍔ㄧ敾銆傝繖浜涜蒋浠舵彁渚涗簡涓板瘜鐨勫伐...
绛旓細楠ㄩ鍔ㄧ敾鍒朵綔杞欢鎺ㄨ崘濡備笅锛1銆丄utoCAD锛欰utoCAD鏄編鍥絘utodesk鍏徃鐢熶骇鐨勪竴绉嶈嚜鍔ㄨ绠楁満杈呭姪璁捐杞欢锛屽彲鐢ㄤ簬缁樺埗浜岀淮鍥惧舰鍜屽熀纭涓夌淮璁捐銆傚畠鍙互鍦ㄤ笉鐭ラ亾缂栫▼鐨勬儏鍐典笅鑷姩缁樺埗鍥惧舰銆傚洜姝わ紝瀹冨湪涓栫晫鑼冨洿鍐呭緱鍒颁簡骞挎硾鐨勫簲鐢紝鍙互搴旂敤浜庤澶氶鍩熴2銆3dmax锛3dmax鍗3d studio max锛岄氬父琚О涓3d max鎴3ds max锛...
绛旓細濡傛灉鐢ㄥ簭鍒楅拡鍒朵綔2d娓告垙姣旇緝鍗￠】鑰屼笖鍒朵綔鎴愭湰寰堥珮锛屾弧瓒充笉浜2d娓告垙鐨勯渶姹傦紝鎵浠2d娓告垙鏄敤楠ㄩ鍔ㄧ敾鍒朵綔鐨勩2d娓告垙鏄寚浜岀淮浜や簰寮忓姩鐢銆備篃灏辨槸鎴戜滑閫氬父鎵璇寸殑2d鍔ㄧ敾浼犵粺鐨2d娓告垙涓殑缇庢湳璧勬簮锛堜汉鐗╄璧般佷汉鐗╃姸鎬併佸湴鍥剧瓑绛夛級閮芥槸浠ng鎴杍pg鐨勫浘褰㈡枃浠舵覆鏌撹屾垚锛2d娓告垙鏄病鍔炴硶瀹屾垚瑙嗚杞崲銆
绛旓細SkinnedMeshComponent璐熻矗娓叉煋锛屽畠鍖呭惈浜楠ㄩ鍙樻崲淇℃伅锛岄氳繃TickPose鍜孯efreshBone鎺ュ彛杩涜瀹炴椂鏇存柊銆係keletalMeshComponent鍦ㄧ户鎵夸簡SkinnedMeshComponent鐨勫熀纭涓婏紝瀹炵幇浜嗕笌鍔ㄧ敾钃濆浘鐨浜や簰銆傚姩鐢绘洿鏂版祦绋嬩粠姣忓抚鐨凾ickComponent寮濮嬶紝閫氳繃TickPose銆乀ickAnimation鍜孶pdateAnimation锛孉nimInstanceProxy璐熻矗澶氱嚎绋嬪姩鐢绘洿鏂扮殑鍚屾...
绛旓細涓銆佸簲鐢ㄦ柟鍚戜笉鍚孲pine鏄竴娆鹃拡瀵规父鎴忓紑鍙戠殑2D楠ㄩ鍔ㄧ敾缂栬緫宸ュ叿锛屽噷椹句簬2D涓3D涔嬮棿锛岄氳繃灏嗗浘鐗囩粦瀹氬埌楠ㄩ涓婏紝鐒跺悗鍐嶆帶鍒堕楠煎疄鐜板姩鐢伙紝鍙互妯℃嫙浜轰綋澶嶆潅鐨勫姩鐢昏繍琛岋紝浣垮緱娓告垙鐨勫姩鐢荤粏鑺傛洿鍔犵簿缇庯紱Flash涓昏鏄仛缃戦〉鍔ㄧ敾锛屽箍鍛婂姩鐢汇丮G鍔ㄧ敾銆佹暀瀛﹁浠剁瓑銆傚睘浜浜や簰寮忓姩鐢昏璁″伐鍏凤紝鍙互灏嗛煶涔愶紝澹版晥锛屽姩鐢讳互鍙婂瘜...
绛旓細1. Live2D鍔ㄧ敾鍒朵綔杞欢涓撴敞浜庡垱寤虹敓鍔ㄩ肩湡鐨勪簩缁磋鑹插姩鐢汇2. 璇ヨ蒋浠舵嫢鏈夊厛杩涚殑楠ㄩ鍔ㄧ敾鎶鏈紝鑳藉妯℃嫙鐪熷疄鐨勪汉鐗╁姩浣滃拰琛ㄦ儏銆3. 杞欢鎻愪緵涓板瘜鐨勭礌鏉愬簱鍜岀紪杈戝伐鍏凤紝鍏佽鐢ㄦ埛鑷敱璋冩暣瑙掕壊鐨勯潰閮ㄨ〃鎯呫佸Э鍔垮拰鍔ㄤ綔銆4. Live2D鍔ㄧ敾鍒朵綔杞欢鏀寔瀹炴椂浜や簰鍔熻兘锛屼娇寰楄鑹茶兘澶熸牴鎹笉鍚岀殑鍦烘櫙鍜屾儏澧冨仛鍑哄弽搴斻5. 璇...
绛旓細铏氬够鍔ㄧ敾绯荤粺鎻愪緵浜嗗己澶т笖鐏垫椿鐨楠ㄩ鍔ㄧ敾鏀寔锛屽叾璁捐鍏佽姣忎釜椤剁偣鍚屾椂鍙楀埌澶氳揪4涓楠肩殑褰卞搷锛岄傚簲澶嶆潅楠ㄩ缁撴瀯鐨勯渶姹傘傝繖涓绯荤粺鐨勬牳蹇冩槸閫氳繃涓妫靛姩鐢荤墿浣撴爲鏉ラ┍鍔ㄥ姩鐢伙紝瀹冨寘鎷绉嶆帶鍒跺櫒锛氭贩鍚堟帶鍒跺櫒锛氳礋璐ｇ鐞嗗祵濂楀姩鐢荤墿浣撲箣闂寸殑澶氳矾娣峰悎锛岀‘淇濆姩鐢绘祦鐣呮棤缂濄傛暟鎹┍鍔ㄦ帶鍒跺櫒锛氬彲浠ュ皝瑁呭姩浣滄崟鎹夋垨浜哄伐鍒朵綔鐨勫姩鐢...
绛旓細3. Anime Studio - 涓骇鍔ㄧ敾鍒朵綔鐨勫緱鍔涘姪鎵婣nime Studio鍑熷叾鍩虹鎵嬬粯鍜楠ㄩ鍔ㄧ敾鍔熻兘锛屼互鍙婇珮绾х殑鍔ㄧ敾鎺у埗鍜岀壒鏁堬紝璁╀腑绾у埗浣滆呬篃鑳借交鏉惧垱浣滃嚭瀵屾湁娣卞害鐨勫姩鐢汇傛祦鐣呯殑宸ヤ綔娴佺▼锛岃鍔ㄧ敾鍒朵綔鍙樺緱杞昏屾槗涓俱4. TVPaint Animation - 楂樼骇2D鍔ㄧ敾鐨勮壓鏈涔嬮塗VPaint Animation浠ュ叾绗斿埛宸ュ叿銆佽壊褰╄皟鏁村拰3D鎽勫儚鏈...
