闲鱼Flutter互动引擎系列——骨骼动画篇

骨骼动画是一种通过控制骨骼参数来实现多帧动画的方式，区别于GIF的不连贯和序列帧的体积大，骨骼动画有较好的灵活性和流畅性。目前骨骼动画已经被大规模地在游戏和动画中所使用，大有一种取代帧动画的趋势，Candy互动引擎对骨骼动画的支持自然是必不可少的一环。

从工具入手

动画是互动中很重要的一环，通过恰到好处的动画形式往往可以给用户更加新鲜的体验。由于动画制作是一项需要和UED高度合作的工作，面对UED无尽的参数变更，选择一个好用的工具就变得至关重要，毕竟谁也不希望自己在开开心心的敲代码的时候UED过来找你调动画参数。参考行业目前的工具链体系，并从中选择出一套适合我们的工具是比较好的选择。

先看曾被Flutter官方推荐过的骨骼动画制作工具Flare，其优势在于对于Flutter的支持较为完善。但是问题在于这套工具对于设计师来说比较陌生，而且.flr格式是一个全新的格式不够通用，所以最终我们放弃了这个方案。

为了配合集团现有的互动工具链，我们把目光放到了前端领域，白鹭引擎（Egret）是一个在前端领域小有名气的游戏引擎，其配套的工具体系包括DragonBone（骨骼动画）、Feather（粒子动画）等。这套工具在互动领域已经被使用了多年，对于设计师来说比较好上手。使用这套体系最大的问题是在Flutter上没有相应的实现，但是其产物的文档非常完善，所以我们最终选择在Flutter上解析并实现相应的Runtime。

基础知识

要进行骨骼动画的制作必然要先对骨骼动画本身要有一个基础了解，骨骼动画的详细介绍可以参考DragonBone官方教程，对于骨骼的几个关键概念我们还是必须先进行了解。

• 骨架（Armature）：骨架是骨骼的集合，骨架中至少包含一个骨骼。

• 骨骼（Bone）：骨骼是骨骼动画的基本组成部分，骨骼之间存在父子关系，父亲的变换会影响到孩子。一般通过骨骼的旋转、缩放、平移等变换即可形成动画。

• 插槽（Slot）：插槽是图片的容器，是骨骼和图片的桥梁。一根骨骼可以挂载多个插槽，可以视作骨骼是插槽的父节点，骨骼的变换会影响插槽。

• 显示对象（DisplayData）：显示对象通常为图片。一个插槽中可以有多个显示对象，但同时只会有一个被显示，通过修改当前显示的对象可以形成帧动画。

<