关于前端:2D动画spine渲染原理解析与源码解读

前言：什么是spine？

为了让初学者有更加直观的初步的理解，笔者提供了一个简略的示意图如下:

理论开发中，由设计人员提供对应的spine编辑器所导出的动画素材，开发人员选用对应的spine运行库对素材进行生产和上屏渲渲染，便是spine所做的事，相比gif、css帧动画、apng具备更加弱小的灵活性。

简略比拟如下：

GIF因为其自身的色调限度，个别不能满足设计的要求，因而目前大多采纳CSS帧动画和APNG的形式解决页面动画，小区域动画采纳apng，大区域动画能够思考采纳CSS帧动画或JS动画解决。而厘米秀这里因为业务自身简单且形象打扮多变，故不得不采纳spine2D动画的计划。

正文：

1）、JSON文件/二进制文件：存储骨架信息，见下文介绍。

2）、素材图片：相似雪碧图，也可繁多素材，可导出一张或多张。

3）、与素材图片对应的atlas文件：记录素材图片在雪碧图上的地位信息特色等。一个atlas文件可对应多个素材图片。

一、基本概念

1、骨架Skeleton：指代的是数据的汇合，蕴含形成此骨架的所有骨骼、插槽、附件及其他信息。

2、骨骼bones：以官网示意图为例，一个人物自身由多个关节的骨骼组成。除了根骨骼以外，每个骨骼都有对应的父骨骼，骨骼与骨骼之间的关系最终结构成相似树的构造。

3、插槽slot：一个骨骼bone下可能有多个slot插槽，每个slot插槽下能够搁置一个附件实例。插槽自身的存在有两个重要的意义，一个是灵便的管制渲染程序，一个是分组同类附件。一个插槽能够有多个附件，但一次只能看到一个。举个简略的栗子，图中手枪所在的地位的插槽是"武器"插槽，而该插槽能够搁置不同的武器附件，例如"手枪"附件或"菜刀"附件。

4、附件attachment：slot插槽内以后渲染的附件实例，即实在上屏渲染的实物素材。（可能须要对素材做旋转、偏移、缩放甚至网格化mesh解决）。

5、皮肤skin：skin能够看做是attachment的汇合，或者能够认为是attachment的一个映射查问表，一个人物能够由多套skin，通过切换skin的形式去查问不同的附件映射表，便能够变相的实现人物的全身换装。

其余相干概念：

关键帧：

在编辑器中，动画是借助关键帧实现的，从开始到完结的过渡动画，由spine补间解决。

权重与网格：

权重用于将网格顶点绑定到一个或多个骨骼。变换骨骼时，顶点也会随之变换。权重令网格可能随着操纵骨骼而主动变形，从而让本来简单的网格变形动画变得与骨骼动画一样简略。

附件类型：
1、区域附件：一般的图片展现附件。
2、点附件：空间中的一个点和旋转，相比骨头的劣势能够为不同的皮肤设置更改地位和旋转，例如不同的枪从不同的地位射击。
3、网格附件：反对在图片内设置多边形，之后可操纵多边形的顶点，以无效的形式让图片蜿蜒和变形。
4、边界框附件：附加到骨骼上的多边形，骨骼变动的时候也会随之变形，可用于撞击检测，创立物理主体等。
5、剪裁附件：剪裁性能让你能够定义一个多边形区域，与边界框附件相似，它会屏蔽绘制程序中的其余插槽。
6、门路附件：用于设置门路。

其中在业务中比拟罕用到的是区域附件和网格附件。

三种束缚：
1、IK束缚：反向动力学束缚 子骨头起点固定的场景。
2、变换束缚：变换束缚指的是将对骨骼的世界旋转、挪动缩放等复制到多个骨骼上。
3、门路束缚：应用门路来调整骨骼变换，骨骼能够沿着门路，也能够调整旋转以指向门路。

二、spine架构和外围类解读

spine整体架构分层如下：

spine外围类如下：

读懂下面这张官网所提供的类图，将会对spine的整体架构设计有更加明确的理解和意识。

1、Loading模块：是针对资源加载的解决，一个spine形象的骨架信息导出后，个别会导出为json或者二进制文件的模式，因为json模式纯文本文件过大，所以官网提供了二进制文件导出的模式，并且辅以运行库的代码针对二进制文件进行解析。其次，Loading模块中的atlasAttachmentLoader将会负责atlas文件的解析，因为atlas文件自身是字符串的模式，外部蕴含雪碧图中素材的地位信息，所以须要解析后与素材建设”关联关系“。例如：Eyes-close素材在picture1.png图片中的x,y地位 旋转角度为z，而结构进去的这种映射关系将用于被实例化attachment的时候生产。

2、Spine Texture Atlas模块：一张素材图映射一个atlasPage，一张素材图中的某个区域块映射一个atlasRegion，而region的具体绘制信息实质上曾经在上个模块实现。

3、Rending模块：由渲染层遍历slot进行渲染，这里不做详解，渲染层并非spine外围库所负责的局部，上屏渲染能够由canvas、webGL或者其余第三方渲染库渲染，例如pixijs。

4、SetupPoseData模块：或者称之为SkeletonData模块，数据源从这里输出进行解决，然而并不是最终数据，能够了解为这里对数据做了一层预处理，会将骨骼数据先解决为boneData，插槽数据处理为slotData，当然也有局部数据不须要被再次解决，在这里，也会依据后面生成的atlasRegion去结构出对应的附件实例，存储进skin中，skin实质上为附件映射表。

其次，数据对象自身和实例对象是有差异的。

数据对象是无状态的，可在任意数量的骨架实例间共用。有对应实例数据的数据对象类名称以“Data”结尾，没有对应实例数据的数据对象则没有后缀，如附件、皮肤及动画。

实例对象有许多属性与数据对象雷同。数据对象中的属性代表拆卸姿态，通常不会改变。实例对象中的雷同属性示意播放动画时该实例的以后姿态。每个实例对象保有一个其数据对象参考，用于将实例对象重置回拆卸姿态。

例如，SkeletonData是数据对象，而Skeleton是实例对象。

5、Instance Data模块：或者称之为Skeleton模块，Skeleton实例自身是渲染层上屏渲染的实在间接数据源，渲染层将读取Skeleton实例上的插槽信息，渲染对应的附件，在这里，许多数据对象曾经被解决成对应的实例对象，例如boneData曾经被解决为Bone实例，slotData曾经被解决为Slot实例；其次，如图中所展现的，Skeleton实例中有两个比拟要害的办法，updateWorldTransform和setToSetUpPose。

updateWorldTransform为更新世界变换，实质是触发骨骼地位的计算，因为骨骼地位可能产生旋转偏移，其对应的子骨骼也会受到影响，因而须要更新世界变换从新计算所有骨骼的最新坐标地位。

setToSetUpPose为更新实例到以后初始状态，个别才初始化时或重置人物状态时调用，会将人物形象骨骼打扮等切换为初始最后的状态。

6、Animation模块：动画模块被独自抽离，不仅更不便保护和更新实例的状态信息，整体架构逻辑也简洁明了，由动画state实例去触发skeleton实例的更新，接下来skeleton实例调用updateWorldTransform更新世界变动，之后从新上屏渲染。

一个动画实例中由多个timeline形成，这些timeline实例来自于不同的变种Timeline类，基本上都继承与底层的TimeLine类，因为一个动画过程中可能波及多种变动，因而须要对不同的动画进行划分区别，解决旋转的独自一条timeline，解决缩放的独自一条timeline，等等。而尽管不同类别动画会抽离成不同的timeline，然而最终某个工夫节点失效触发，所有的timeline"作用"都是同时的。

三、spine源码解读

1、Slot：存储插槽的以后姿态。插槽为{@link Skeleton#drawOrder}目标组织附件，并提供存储附件状态的地位。状态不能存储在附件自身中，因为附件是无状态的，能够跨多个骨架共享。
（deform属性是针对mesh附件的解决信息。）
（通过setToSetUpPose设置初始动作）
（在slot实例里能够间接getAttachment和setAttachment）

2、SlotData：slot实例里用的数据的数据格式，蕴含index、插槽名称、附件名称、boneData等。

3、BoneData：骨头实例里用的数据格式，蕴含index（骨头也有index）、骨头名称、父骨头数据、骨头本地转换数据、世界转换的模式。

4、Bone：要害办法updateWorldTransformWith，更新骨骼的世界坐标。蕴含其余的一些办法，世界坐标和本地坐标的转换，旋转转换等。

5、SkeletonData: Skeleton实例对应的数据格式。蕴含bones、slots、skins、events、animations、各种束缚。提供了
因为是数据对象，仅提供了一些findbone、findslot的办法。

6、Skeleton：依据data新建Bone和Slot。bone有index按程序建设关联关系。调用setToSetupPose将bone和slot设置到初始地位。会遍历调用bone和slot对应的办法。updateWorldTransform调用bone的updateWorldTransform更新骨骼地位。提供了一些Bone、slot、attachment的get、set办法。
有个update办法，更新time工夫。

7、SkeletonBinary：用于读取二进制的skeleton文件。

8、SkeletonBounds：收集每个可见的BoundingBoxAttachment，并计算其多边形的世界顶点。次要用于碰撞或者命中检测。由渲染层调用。

9、SkeletonCilpping：次要针对ClippingAttachment的解决，由渲染层调用。

10、SkeletonJson：用于解析解决spine导出的skeleton json。须要对应传入一个attachmentLoader让其能结构对应的attachment实例，解决bone、slots、ik、skins、animation等数据。
解决bone和slot结构对应的实例data。
解决skins借助loader生成对应附件实例。
解决 animations生成不同的timeline实例对象。
最终结构出对应的SkeletonData实例。

11、Skin：一套皮肤下的所有attachment都在skin实例下，提供了操作skin和attachment的办法。这里操作的办法相当于dictionary，不是扭转人物打扮的。

12、attachment目录：各种附件的解决解决办法，继承于Attachment基类。理论由对应的AttachmentLoader调用对应的附件类办法。
AtlasAttachmentLoader实现了对应办法。

13、Texture：定义了Texture抽象类，定义一些形象办法须要被实现。

14、TextureAtlas：针对atlas文本进行解析解决，实现TextureAtlasReader进行逐行读取，texture
借助内部传入的textureLoader回调来获取对应的纹理。
每块小素材对应一个TextureAtlasPage，素材信息读取解析后结构对应TextureAtlasRegion。

15、AnimationStateData：存储AnimationState动画更改时要利用的混合（穿插淡入淡出）持续时间。

16、AnimationState：随着工夫调用动画，动画入队期待播放，容许多个动画叠加。
分多个track存储动画、辨别不同动画的timeline，针对event事件的解决逻辑等。

17、Animation：实现了各种timeline类，Animation负责调用apply办法触发更新，其apply办法会调用各个timeline的apply办法更新。timeline类中实现找到对应关键帧 决定如何渲染。

18、AssetManager：动态资源管理，包含拉取文本资源、拉取二进制资源、加载纹理。调用TextureAtlas解决atlas文本等。

四、渲染库代码解读

canvas：
1、AssetManager：没有做啥，间接沿用core里的AssetManager
2、canvasTexture：继承Texture。
3、SkeletonRender：传入skeleton数据，渲染画布，
drawImage会遍历drawOrder中的slot，一一渲染region附件，借助ctx.drawImage API来裁剪和渲染图片。
drawTriangles会计算顶点，渲染调试模式的绿色线条。

threejs：
1、ThreeJsTexture：针对threesjs自身的texture做了一层包裹，解决了一下filter。
2、MeshBatcher：MeshBatcher继承自Threejs自身的Mesh。调用SkeletonMeshMaterial获取材质。
3、SkeletonMesh：SkeletonMeshMaterial继承自ShaderMaterial，这里蕴含了着色器代码，顶点着色器和片元着色器。
SkeletonMesh继承自Object3D类。
外围渲染函数updateGeometry，skeleton更新世界变动后，调用渲染函数，遍历drawOrder。
RegionAttachment和MeshAttachment会进行渲染，渲染借助MeshBatcher，纹理作为素材传入batchMaterial。

webgl：
1、GLTexture：获取画布，渲染对应的image到画布上。
2、Camera：设置相机地位
3、WebGL：定义了ManagedWebGLRenderingContext，其实就是获取webgl的context上下文。
4、Input：对元素做事件监听，鼠标、touch事件。
5、Shader：自行实现的着色器，片元和顶点。
6、SkeletonRenderer：负责skeleton的上屏渲染，渲染函数须要借助PolygonBatcher来上屏渲染，同样的，只会对RegionAttachment和MeshAttachment会进行渲染。
7、PolygonBatcher：在这里绑定着色器，设置混合模式，绑定一个Mesh实例对象，Mesh为独自封装的mesh类，最终调用的是Mesh裸露的渲染办法。
8、Mesh：独自封装的Mesh类，容许设置指数和顶点，上屏渲染借助context的drawElements和drawArrays办法。
9、SceneRenderer：最上层的调用类，实例化batcher、webgl上下文、shader，实例化SkeletonRenderer，裸露不同的渲染办法，包含drawSkeleton，drawSkeletonDebug、drawTexture、drawRegion等。

五、spine渲染整体流程图

依据后面的介绍，咱们对基本概念有所理解，并且理解了spine的整体架构设计，针对外围模块进行了介绍，同时对spine外围库源码以及渲染层源码的要害逻辑进行解读，能够整顿出spine渲染的整体流程图如下：

看到这里置信你对spine的整体架构设计，渲染流程都曾经有了大抵的理解，接下来在明确了底层外部的解决流程后，咱们的下一步工作是实现换装和换动作API，具体如何实现，请听下回分解！

谢谢观看~~