对2个网页帧动画框架的调研

需求中有的地方需要用到动画，设计动画的软件主要有AE和Spine，新入职的动效设计师可能之前是做游戏动画设计的，他给了我们一份Spine动画导出的资源，于是我开始了Spine的调研。

我们对动画框架的要求

和宁哥沟通过后，明确了我们开发这边对于动画框架的3点要求

1. 能够完成动画的渲染 这是最基本的需求，就是能够使用web可用的方式渲染出动画，比如canvas、svg或基于cavas的webgl等。

2. 能够绑定事件 虽然现在没有操作动画中的某个元素的需求，但宁哥说以后可能会有，所以需要在选择动画实现方案的时候考虑到。

3. 性能 动画需要不断的re-render，占用计算资源较多，性能也是要考虑的因素，避免出现卡顿的情况。

spine动画

spine制作的是骨骼动画，也就是一个物体各部分的运动，比如人的头部、躯干、四肢等身体任何部位的动画。一般游戏中用骨骼动画比较多。

spine runtime支持的渲染方式只有canvas（webgl也使用cavas渲染），并不支持类似dom元素的事件绑定，想绑定事件只能用canvas的方式根据用户点击的位置的坐标和层级来确定触发哪个对象的事件，当然像游戏框架之类的都会维护一套对象体系来绑定事件，不需要针对渲染区域的绑定。但是spine runtime只是一个动画框架，我查阅了文档并没有找到给某个元素绑定事件的api，只找到了针对动画的事件，比如动画完成、动画切换等，想想也是正常的。

ae动画

ae制作的动画多为序列帧动画，能制作各种效果，也支持各种插件，我查到有一些做骨骼动画的ae插件，比如duid。

lottie是对ae导出的动画资源进行解析和在ui中渲染的库，支持的渲染方式有canvas、svg、dom，同样的，lottie也没有绑定事件的机制，只是纯粹的动画资源解析和渲染。但是lottie的渲染方式中有svg和dom，这样就可以通过dom的api来做事件绑定了。

针对动画绑定事件的思考

宁哥说有的场景可能需要对动画的某部分元素绑定事件，所以需要动画框架支持事件绑定。但是动画框架本身就不应该包含这部分功能，他们只是对动画资源的解析和渲染，并且有的部分并不是独立出来的元素，而是图片的一部分区域，没有拆分出来。lottie和spine都没有提供元素绑定事件的功能，甚至根本没有元素的概念（spine骨骼动画中的slot只是为了动画的渲染而进行的简单的图片资源封装）。

如果要绑定事件到动画的“元素”，那么只能使用lottie，因为他能渲染成dom或svg，这样就可以绑定事件了。

其实，我觉得如果有这种需求，也不一定把事件绑定在动画“元素”上，可以用一种变通的方案： 包一层dom元素，对dom元素绑定事件，触发动画时，隐藏该元素，动画结束，该元素显示出来。

比如这朵花，他们就可以用一个摇摆的动画来显示，外面包一层div。针对这个div绑定事件，当点击的时候，把那朵花隐藏掉，然后在该位置显示一个别的动画，比如花跳舞，然后动画结束之后，再把那朵花摇摆的动画显示出来。

这是两种思路，都是通过dom来绑定事件，不过一个渲染使用的dom，一个渲染使用的是canvas。

为什么不两个框架一起用

我问过宁哥，既然lottie和spine各有优点，为什么不两个一起用，封装一个动画的组件，支持通过参数选择动画实现方案，这样不管设计那边给什么资源都可以用。

宁哥说这样会增加学习的成本，为了完成动画的功能，需要学习两个动画框架，而且这两个动画框架功能基本是重合的。如果spine的方案有不适合的地方，应该去和设计沟通，让他们提供ae的资源，而不应该引入俩框架。

总结

因为有动画的需求进行了动画框架的调研，我们这边有能完成功能、能绑定事件以及性能3个要求，调研的是Spine Runtime和Lottie。

Spine Runtime专注于做骨骼动画，AE做序列帧动画，通过插件做骨骼动画。Spine Runtime支持canvas渲染，Lottie支持canvas、svg、dom渲染，两者都不提供绑定事件的功能。但是Lottie使用dom或svg渲染时可以使用dom的机制来绑定事件。

如果两个框架一起用会增加学习成本。按照我们的要求，似乎只有Lottie合适，但我觉得如果要绑定事件可以通过dom，然后动画的渲染使用动画框架，通过元素的显示和隐藏，来结合dom绑定事件和动画框架渲染动画这两部分的功能。