spine网页

今天主要做了spine的研究

1. spine动画和live2d的区别

2. 网页动画的原理和分类，为什么spine动画能够在web中运行
   网页中的动画分为属性动画和帧动画。
   属性动画就是通过改变dom元素的属性如宽高，字体大小或者transform的scale，rotate，就是对dom元素的属性改变，在一段时间内：属性值按照时间函数变化来实现。
   帧动画：在一段时间内按照一定速率替换图片的方式来实现。

spine是针对游戏和软件2d动画的制作的，spine runtime使用一个小图片合成的大图片。
spine在网页中引用可以用canvas的spine runtime来实现

3. 如何接入ts项目，实现spine动画的原理
4. 如何在项目中封装方便创建的动画类和操作动画方法
5. 分析网页性能包括：内存和cpu占用情况

待研究的问题

1. webpack4最大的变化在于：commonplugins的废除改为了splitplugin，并且在实现零配置，可以设置mode为development和production，默认为production，会进行自动分包：自动分包策略是什么，为什么我的项目没有自动分包。
2. webpack对资源的处理，还是没有彻底搞清楚对比如图片和各类资源的打包策略

webgl和canvas的区别：
canvas是载体，canvas 2d相当于获取了内置的二维图形接口，canvas 3d是获取基于webgl的图形接口，相当于三维画笔，你可以选择不同的画笔在上面作画

[动画特效选择][https://juejin.im/post/5cc08848e51d456e7618a6ee#heading-2]

游戏引擎：渲染引擎，物理引擎，碰撞检测系统，音效，脚本引擎，网络引擎，场景管理
白鹭： 本身不支持spine动画，需要插件，本身支持的是dragronbone
cocos
layaAir
phaser: 也不正常
这类3d的游戏库都是封装的spine-webgl.js，也就是spine-runtime的canvas的webgl版本

渲染引擎：
pix.js：2d动画渲染引起 ：我用pix.js接入不正常，目前还不知道什么原因，可能是需要3d的支持
babylonjs
three.js 3d渲染引擎： three.js接入正常

结论：可以直接使用spine-webgl runtime来嵌入spine动画,获取选择一个渲染引擎来做动画的渲染。

spine动画调研背景

live2d具有性能问题，并且制作成本较高。

spine动画在网页端运行条件

spine在网页端能够基于canvas2d或者webgl来运行，官方提供了一些运行库, 第三方的游戏引擎和渲染引擎也有很多集成了spine-runtime，选择其中几个进行测试（ps: 白鹭本身不支持spine动画，第三方的的包在通天塔项目中尝试过动画会出现问题），结果如下:

官方运行库	结果
spine-canvas.js	渲染异常，会有重影
spine-webgl.js	动画效果正常

第三方游戏引擎或渲染引擎	结果
pix.js	渲染异常，贴图错位
phaser	渲染异常
three.js	动画效果正常

总结：测试动画需要的运行条件须为webgl，使用three.js和spine-three.js可以方便的接入到项目中。

spine动画对比live2d内存占用

利用chrome memory进行内存占用快照

1. spine动画内存占用

   
   
   spine动画内存占用

2. live2d运行内存

   
   
   live2d.png

结论：初步分析spine动画运行时项目所耗内存平均值大约为87mb，live2d内存平均值大约为105mb，从内存占用来看spine动画具有优势。