前言
目前，咱们H5展示页面动效的时候，对于一些简单的内容，使用css3的animation和 一些第三方的动画库就可以实现了，但是，对于复杂一些的动画，特别是定制化的那种，即使我们使用 css、js（或者用帧动画、属性动画、Gif、WebP等实现）可以勉强实现，也做不到100%还原，还会出现各种各样的兼容性/性能问题。
这个时候，我们就需要使用一些动画框架了，最好是能跨平台的那种，一套动画代码，多个平台使用，H5比较常见的场景就是浏览器H5页面和小程序/小游戏，偶尔会有cocos嵌入H5的页面，但也是 cocos的webview组件，主体效果差不多，这个不多谈。
目前，我们公司的动画文件有两种，svga文件和 spine动画文件，用什么框架加载它们？该选择哪种方案？如何提高性能？是这次调研的主要方向
性能对比
本次做了两组控制变量前提下的对比
- 控制动画效果相同：比较 1个，5个，10个动画资源同时加载的性能情况
- 控制动画资源大小相同（近）：比较 1个，5个，10个动画资源同时加载的性能情况
组件准备
- svga 组件采用少飞优化过后的组件，对比之前，性能提升了非常多，数据和第一版的结果有明显提升
spine组件我也做了类似的优化处理，将宿主对象单独处理，不进行双向绑定，性能较第一版结果也有提升
实验数据准备
由于spine动画的文件资源不支持从本地加载，localhost 调试的时候很麻烦，只能上传文件到远端，然后再处理，因此，为了控制变量，spine和svga都采用远程加载的方式
对照组1: 动画效果相同
————-
svga:
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/svga/v_03/tower.svga (483kb)
————-
spine
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.atlas (12kb)
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.json (86kb)
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.png (508kb)对照组2: 动画资源文件相同（近）
很难找到资源大小一模一样的动画文件，这里用近似来代替，尽量选择相近的大小文件
————-
svga:
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/svga/v_03/xinqiuE.svga (629kb)
————-
spine 相加 = 616kb
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.atlas (12kb)
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.json (86kb)
https://qiniustatic.wodidashi.com/taoxiaolin/spineTest/spine/v_03/mengyouxianjing12.png (508kb)实验结果
采用两种计量方式
使用浏览器的Performance, 录制方式为点击 start profiling and reload page，当页面完全加载完成之后，会自动统计
- 将测试页面部署到jenkins上，一共12个页面，使用丹秋分享过的性能分析工具，分别得出不同的结果
浏览器性能监控分析对比数据
浏览器只开一个窗口，取值10次，去掉一个最大值，一个最小值，最终取平均数，截图均取自第一次的取值
（两次spine用的是同一个动画文件，因此两次分组，spine组的数据可直接复用）
| Svga（同动画效果 483kb， 同文件大小 629kb） | Spine（altas 12kb, json 86kb, png 508kb）(相加 = 616kb) | |
|---|---|---|
| 动画效果相同：单个文件 |  取值10次 【913，744，780，883， 去掉一个最大值，一个最小值 最终结果：821.75 |
 取值10次 【1268，1790，1787，1149， 去掉一个最大值，一个最小值 最终结果：1624.375 |
| 动画效果相同：5个文件 |  取值10次 【5627， 去掉一个最大值，一个最小值 最终结果：5680.25 |
 取值10次 【5838，5935，5823，5759，5772， 去掉一个最大值，一个最小值 最终结果：5801.25 |
| 动画效果相同：10个文件 |  取值10次 【5533，5967， 去掉一个最大值，一个最小值 最终结果：5757.75 |
 取值10次 【 去掉一个最大值，一个最小值 最终结果：6273.875 |
| —————————— | ————————————————————- | —————————————————————— |
| 文件大小相同：单个文件 |  取值10次 【4079，3874，2080，3024， 去掉一个最大值，一个最小值 最终结果：3494 |
取值10次 【1268，1790，1787，1149， 去掉一个最大值，一个最小值 最终结果：1624.375 |
| 文件大小相同：5个文件 |  取值10次 【6164， 去掉一个最大值，一个最小值 最终结果：5918.75 |
取值10次 【5838，5935，5823，5759，5772， 去掉一个最大值，一个最小值 最终结果：5801.25 |
| 文件大小相同：10个文件 |  取值10次 【6518， 去掉一个最大值，一个最小值 最终结果：5993.625 |
取值10次 【 去掉一个最大值，一个最小值 最终结果：6273.875 |
小结论
- 在同样动画效果的情况下：svga 的性能略优于 spine, 当然，这里肯定有文件大小的关系，svga 483kb, spine 616kb, 总体上差距并不大
- 在相同文件大小情况下：文件个数较少的时候，spine略优于svga, 当文件数量增多，svga 的性能略优于 spine
- 无论哪种情况，svga 的loading和render速度都优于 spine
性能分析工具分析对比数据
调用命令： ```bash npx wbWebpack performance —url https://t1.zhuhuiyao.cn/web/front-biz-community/community/h5spine-test/svga1V1.html —outpath /Users/taoxiaolin/Desktop
取值10次，去掉一个最大值，一个最小值，最终取平均数，截图均取自第一次的取值| | Svga | Spine || --- | --- | --- || 动画效果相同：单个文件 | <br />取值10次<br />【~~53~~，48，~~46~~，46，49，48，50，49，50，49】<br />去掉一个最大值，一个最小值<br />最终结果：48.625 | <br />取值10次<br />【56, 76，75，~~76~~，71，56，67，74，~~53~~，69】<br />去掉一个最大值，一个最小值<br />最终结果：68 || 动画效果相同：5个文件 | <br />取值10次<br />【20，20，20，19，~~21~~，20，20，20，~~18~~，20】<br />去掉一个最大值，一个最小值<br />最终结果：19.875 | <br />取值10次<br />【72, 72，~~59~~，73，71，73，72，~~74~~，74，71】<br />去掉一个最大值，一个最小值<br />最终结果：68 || 动画效果相同：10个文件 | 取值10次<br />【17，20，20，19，~~21~~，20，20，20，~~18~~，20】<br />去掉一个最大值，一个最小值<br />最终结果：19.875 | <br />取值10次<br />【68, 65，66，65，65，~~59~~，~~73~~，68，66，72】<br />去掉一个最大值，一个最小值<br />最终结果：66.875 || ----------------------- | -------------------------------------- | ---------------------------------------- || 文件大小相同：单个文件 | <br />取值10次<br />【49，56，59，56，~~61~~，~~45~~, 54，56，53，57】<br />去掉一个最大值，一个最小值<br />最终结果：55 | <br />取值10次<br />【56, 76，75，~~76~~，71，56，67，74，~~53~~，69】<br />去掉一个最大值，一个最小值<br />最终结果：68 || 文件大小相同：5个文件 | <br />取值10次<br />【48，48，49，~~40~~，50，46，47，46，~~52~~，47】<br />去掉一个最大值，一个最小值<br />最终结果：47.625 | <br />取值10次<br />【72, 72，~~59~~，73，71，73，72，~~74~~，74，71】<br />去掉一个最大值，一个最小值<br />最终结果：68 || 文件大小相同：10个文件 | <br />取值10次<br />【20，~~25~~，20，21，25，~~20~~，22，20，23，21】<br />去掉一个最大值，一个最小值<br />最终结果：21.5 | <br />取值10次<br />【68, 65，66，65，65，~~59~~，~~73~~，68，66，72】<br />去掉一个最大值，一个最小值<br />最终结果：66.875 |<a name="o3mX9"></a>#### 小结论1. 在同样动画效果的情况下：spine 的性能优于 svga, 且当文件数量越多，优于的幅度越大2. 在相同文件大小情况下：spine 的性能还是 优于 svga, 且当文件数量越多，优于的幅度越大3. 无论哪种情况，svga 的首次内容绘制时间都优于 spine<a name="ZJbc6"></a># 结论1. 根据浏览器对比结果：svga的性能略优于spine，但是优势并不明显，差距不到1s; 另外，svga 初次加载/渲染速度 优于 spine2. 根据性能分析工具：spine 的性能全面优于 svga, 且当文件数量越多，优于的幅度越大3. 在手机上访问（我在测试环境发了全服小总管消息：H5 spine&svga性能对比），得到的结果和浏览器分析结果相吻合，加载10个 spine动画资源的时候，会出现部分动画加载失败/卡顿的情况为什么性能分析工具和浏览器分析的结果完全相反，分析一下原因<br />1. 可以发现，svga的system 和idle 的占比都非常大，比spine多，且文件越多，越明显，说明svga 比较吃硬件性能，浏览器硬件性能肯定是最高的，当硬件性能不是问题的时候，svga > spine; 当硬件性能不够的时候，svga < spine, 文件越多，负担越大，符合性能工具的的分析结果2. 和丹秋沟通过，性能分析工具使用的模拟器配置，性能不是很好，下面是截图， 四核CPU，安卓版本 6.0.1， 网速tcp rtt 150ms，现在的安卓大部分都是6G，8G内存, 6核处理器等等，模拟器的配置很低<a name="S8hzv"></a># 结果分析1. 动画个数较少且文件体积较小的时候，svga加载速度略优于spine，因为spine需要加载额外的pixi.min.js, pixi-spine.js 等等，会占据额外的一些时间2. 动画个数较多且文件体积较大的情况下，如果能完全加载出来，那么spine优于svga, spine不至于导致页面崩溃，而svga会；如果动画多且文件体积大，且不能完全加载出来，那其实是一种不应该出现的问题，可以让UI对动画文件进行简化和压缩3. 总的来说，目前 经过优化后的svga 组件能满足绝大部分需求了，性能是要优于spine的，优势并不明显，差距不到1s；svga的初次渲染速度也要快于 spine<a name="qj8vL"></a>## spine文件相比svga有几个比较重要的优势(注：这些优势大部分是pixi提供的，svga文件是由svga组件实现播放，spine文件是由pixi.js 实现播放)1. spine可以在同一个文件里，设计多个动画动作，因为它的动画效果是由一张张“骨骼切片”组合起来的（如下），根据不同的组合，可以得出很多动画效果，只需要简单的控制参数，就可以实现只加载一个文件，加载不同效果的动画；而svga一个文件只能有一种动画效果，如果想要切换，就只能使用两份svga文件进行显隐控制2. spine文件的由设计童鞋最终导出的png图片也是可以进行压缩的！（如下），800多k的可以被压缩成100多k, 直接减少了80%的体积3. spine动画可以很方便地进行 加载进度控制和事件处理，是的，这是svga所办不到的，我们能控制svga从哪一帧开始播，哪一帧停止播，但是，如果有个需求是播放到某一帧需要弹出另一个弹窗或者动画效果的时候，svga是无能为力的， 可以模拟但是不准确；spine（pixi）就能很好地进行处理4. 上面提到过，svga暂时无法播放声音，最新版想要播放也需要借助与howler.js 播放mp3类型的音频；而pixi.js 为spine文件提供了 pixi-sound这个库，可以很方便地添加音频5. 社区的差异，spine如果我们最终选用 pixi.js 的话，那么我们就拥有了一个很强大的社区和里面产出的各种工具库，而svga社区目前远远不及 pixi6. pixi.js 可定制化程度比svga大很多，如果想，我们甚至可以基于pixi.js 做一个自己的动画播放引擎因此1. 如果日后的需求场景里，依然是动画文件较小，且数量不多，纯展示动画的话，那么不建议使用spine, 使用svga就足够了，而且使用起来很方便，spine的元素位置定位，额外加载js库等等反而会影响加载速度2. 如果日后的需求场景里，有交互型动画场景，且有动画切换效果需求，或者做成svga动画体积较大, 那么，spine+pixi 将是不二之选<a name="oaq0w"></a># 常见的动画库/痛点分析动画从用途上可以分为两种，一种是展示型的动画，类似于一张GIF图，或者一段视频，另一种就是交互性的动画。展示型动画，在实际使用的场景中，实现的方法很多，比如用gif图，canvas，css3动画等，但是最终输出的结果是不带有交互的，也就是从动画起始状态到结束状态一气呵成，这个过程用户可以感知，但是无法参与。交互性动画，我们可以在动画播放的某个时间节点触发相应的操作，进而让用户参与到其中，最常见的例子比如红包雨，不仅仅能提升用户的体验，还能提升我们的产品的多元性。然而交互性动画经常面临的一个问题就是，通过原生代码实现交互动画是很复杂的，同时性能和兼容性是不得不认真考虑的问题，比较好的解决方案还是寻求相关的框架。我们公司目前使用场景最多的应该是 展示型动画了，但是不排除以后会有交互型动画的需求场景，因此，调研是必须的目前公司内部的动画文件分为<a name="SVGA"></a>## SVGA我们现在使用的是 SVGA动画框架进行 动画播放，可加载本地/远程 的 svga动画文件，还有专门的 svga.vue 动画组件svga框架 github主页 [https://github.com/svga/SVGAPlayer-Web](https://github.com/svga/SVGAPlayer-Web)先安装npm包 svgaplayerweb， 再引入svga 组件<br /> import svga from 'front-common/src/new/components/business/svga/svga.vue';<a name="uY3R7"></a>### 优点和痛点<a name="LtFsM"></a>#### 优点1. 前端不需要关心动画效果如何去实现，完全交给UI同学就行，只需要他们导出.svga动画文件，我们引入之后即可呈现效果2. 大部分机型上，性能展现效果要优于Gif和WebP3. 同样的动画效果，SVGA文件要比Gif和WebP的文件小得多4. 跨平台，支持Android、iOS、React Native、Web、微信小程序5. svga 2.3.0 版本开始支持音频播放了，也就是所，由原先的纯动态效果展示，变成了可以实现短视频动效的动画框架(不过，必须依赖 howler.js 才能播放，这避免了本体体积过大)```javascript<script src="https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js"></script>
痛点
现在也使用过很多次svga组件了，发现的痛点有
- 如果页面的svga数量较多的话，比如商城页，性能消耗还是很大的（听超哥说为了性能，动画的质量和文件体积都做了不小的压缩）还有一个例子，我之前在做声音匹配的时候，加载5个600多k的星球动画的时候，还不是同时加载，就已经有手机开始卡顿了，比如iPhone6，vivo, oppo的低端机等等
- 使用方式上，如果想要做到svga 的实时刷新，就只能使用v-if 且每个 svga组件必须有单独且不重复的key值，众所周知，v-if 会在判断为 false 时完全销毁，在为true时重新创建渲染，当svga动画较长/复杂的时候，由于页面回流的原因，势必会引起更多的性能损耗
- 如果想实现几个动画效果的切换，就必须加载几个svga, 一个文件只能展示一个动作（除非按帧数控制，这样就过于复杂了），增加了文件数量
- 和设计待沟通，关于动画文件导出成spine和.svga哪一种更方便
- 虽说最新版支持音频播放，但是实际效果并没有预想的那么好，首先，howler.js本身播放上就存在兼容性问题，有的机型里的浏览器根本就不支持howler播放，然后，音频的加入，如果页面svga文件比较多，更容易闪退
- 官方github里的issues里有人提里一个关于内存会泄漏的问题，我clone里源码，去看了一下，发现确实如此，在调用 clear() 方法时，this._videoItem 没有重置，会持续占用内存。我们虽然对svga做了一层封装，但是，在销毁的时候，还是需要调用 this.player.clear() 方法，因此还是会存在此问题
issue 链接
https://github.com/svga/SVGAPlayer-Web/issues/93
var player = new SVGA.Player('#demoCanvas');var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。parser.load('rose_2.0.0.svga', function(videoItem) {// 闭包player.setVideoItem(videoItem);player.startAnimation();})// canvas 下的 player.js// play.jssetVideoItem(videoItem) {this._currentFrame = 0;// 赋值未清空this._videoItem = videoItem;this.removeAllChildren();this._addLayers();}clear() {this.visible = false;if (this.stage != null) {this.stage.update();}}
Anime.js
适用场景： 强展示+弱交互性动画，Anime.js是一个轻量级的js驱动的动画库，主要的功能有
- 支持keyframes，连接多个动画
- 支持Timeline，为实现更为复杂的动画提供了可能
- 支持动画状态的控制playback control，播放，暂停，重新启动，搜索动画或时间线。
- 支持动画状态的callback，在动画开始，执行中，结束时提供回调函数
- 支持svg动画
- 可以自定义贝塞尔曲线
- 任何包含数值的DOM属性都可以设置动画
//这个例子实现了目标元素在两帧中实现水平位移anime({targets: 'div',translateX: [{ value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧{ value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧]})
优点
- 显而易见，anime.js不仅实现了CSS3动画的深度封装，更多的是通过js驱动来实现操作动画的状态，timeline实现了对于多个分支动画的管理，对于实现更为复杂的动画提供了可能
- 通过anime.js提供的playback controls和callback，同时对于promise的支持，让我们对于动画的简单交互有了操作的空间
- 虽然不支持canvas，但是支持svg绘制路径，我对svg还不是很了解，待之后深入学习后，在做一个补充。
- 浏览器兼容性比较好，Android 4以上全部支持
缺点与不足
- anime.js做展示型动画是可以胜任的，在做交互性动画方面还是需要看场景，它更多适合做一些小型的交互动画，类似于通过触摸屏幕踢足球这种强交互的，anime.js就不是很有优势了
- 需要详细的去了解和掌控动画逻辑，代码量比较多，遇到复杂一点的动画，很麻烦
Spine
cocos用的是 spine, H5 如果要使用spine 的话，需要使用 PIXI.js（重点）
Pixi是当前渲染效能最高（官网上说的，待验证）的2D渲染引擎。 Pixi纯碎地只做2D渲染，拥有简洁的api，足够通用是它的优势所在。可以根据自己的编程风格去做你想做的任何事情。 Pixi能与其它许多框架无缝集成。
来自官网截图
WebGL可以为 canvas 提供硬件 GPU 加速渲染，借助使用系统GPU可以在移动端中更流畅的展示动画.
优点
- 官网上有这样一句话：Pixi API的优势在于它是通用的，它不是一个游戏引擎。这是一个优势，因为它给了你所有的自由去做任何你想做的事，甚至用它可以写成你自己的游戏引擎。自由度高，Api 通用，可定制化这一点非常重要
- 支持WebGL渲染
- 支持canvas 渲染（官方称PixiJS在canvas渲染方面现在是最快的）
- 非常简单易用的API
- 丰富的交互事件，比如完整的鼠标和移动端的触控事件
- Pixi使用和 Canvas Drawing几乎一致的 api，但不同于 Canvas 的绘画 api，使用 Pixi 绘制的图形是通过 WebGL 在 GPU 上渲染
- PixiJS默认60帧, CreateJS 默认30帧。在较好的设备（比如功能比较强的电脑，比较新的手机）上, CreateJS也能跑到60帧。在刷新率比较高的设备上，PixiJS甚至能跑120帧。（网上博客查阅，未验证）
- 最大优势莫过于通过WebGL来调用GPU渲染动画，这样极大的提升了性能
- 无需深入了解WebGL API或者是浏览器兼容性（因为下面这条原因）
- 支持canvas回退，当前设备不支持WebGL时，PixiJs会使用canvas渲染动画
- 完整的DOCS，比较活跃的社区，有利于深入的学习。
缺点
- 首先是兼容的问题，WebGL在
Android 4.4是不支持的，只能使用canvas进行降级 - Pixi 主要负责渲染画面，很多其它功能开发者得自己写或搭配其它库来使用，不过按照目前来看，是满足我们的需求的。**
- 对于手机版本
Android4.4以上的手机，除了代码层面造成的性能不足，通过WebGL调用GPU渲染，性能还是有保障的。然而对于Android4.4只能使用canvas渲染，性能还是要看动画的复杂度，以及代码的优化
（其实，安卓4.4 的机型已经不太常见了…所以这一点不用过多考虑）
Lottie
Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS, Android, 和 React Native 版本，能够实时渲染 After Effects 动画特效。
优点
- 开发成本低，设计师导出Json文件给到开发即可。
- 动画实现成功率高，只要设计师能设计出来的都能实现。
- 支持服务端URL方式创建，通过服务端配置Json文件随时替换动画，不用重新发版。
- iOS、安卓、Web可用同一套Json文件。
-
缺点
不支持weex上的播放展示
可惜，这条缺点足以成为它落选的与原因了，因为不太匹配公司的业务场景
最后
由于实验数据的问题，没办法做出准确的对比数据，我们依然可以发现 spine动画 和 svga动画 的一些优缺点，以及svga目前存在的痛点问题，希望这份调研报告能对之后的决策起到一定的参考作用
项目地址在 front-biz-community/src/community/h5spine-test 目录下，没忍住还是写了两个组件，spine组件只是实现了最基础的功能，如果之后选用pixi.js的话，组件必须进行升级改造。
测试链接：https://t1.zhuhuiyao.cn/web/front-biz-community/community/h5spine-test/index.html , 小总管消息已经发送，有兴趣的同学可以点开看看。
若有收获，就点个赞吧
0 人点赞
