在我经历的项目中，lottie和vap作为实现特效动画的方式，都常常出现在各个需求实现中。经过了多次使用，我来总结一下我个人从客户端开发的对于这两个技术的看法，非常主观，看个乐
这里是对比web端的lottie和vap
1.资源体积
对于前端或者说客户端而言，无论是web前端打包boundler或者客户端包体积，都是希望越小越好的，所以对于这种大型assets的体积就还挺看重的。
就我个人经验而言（从设计那里拿到资源）
对于小特效，也就是播放面积不大，时间不长的，lottie和vap都差不了多少，都可以在几百kb以内。
但是对于超过十秒的大动画而言，vap的体积就膨胀到非常大的地步了，经验而谈大概能有10mb-20mb, 这是因为vap本质就是MP4视频，就是清晰度和时长决定了体积；
但是对于lottie而言，体积在于images的数量，如果你是重复使用这些images做不同的动画，实际上无论1s还是10s没有什么区别，经验而谈最大的lottie（也可以说最贵的礼物，有一百多张图片）的体积我看到了3mb，大部分还是在1mb左右。
打个分？ 体积这里lottie胜利 lottie👍 vap👎
2.性能&内存占用
Lottie在web上还有不同的renderer，分为svg，canvas，html。 我使用的是lottie-svg，至于为什么？其实一开始我是使用canvas的，当时的我从直觉上感觉canvas更好。
但是有一次有人反馈了一个bug给我，特效播放异常，我一看原本的扫光没有正常扫，而是一个巨大的白色正方体斜着move-in move-out, 我猜是canvas renderer有什么features没实现。在lottie-support 一查看，应该就是Alpha Matte，我替换到svg renderer后就好了，也就一直用svg-renderer了。
扯远了，lottie-svg的话当然也就是依托svg里各种元素了。然后根据json中配置确定在不同帧下每个元素应该在什么位置。通过transform
可以看到, 每一次requestAnimationFrame，动画中各个部件（image）都在各自按照规划修改transform属性达到动画效果
因为transform属性的修改不会触发restyle relayout repaint，在浏览器中的合成器下工作，在gpu加速下还行，但是在重任务block住浏览器主线程的时候，还是能看到动画的卡顿。
至于lottie实例的内存，我觉得也是相当客观，还是是经验而谈，我遇到过播放一个礼物动画就能把内存增加100mb的，我也好奇几兆的资源，播放出来占用这么大。 但是这也是个例，设计修改后好了很多，估计是什么特殊效果影响到，其余大部分还是比较小10 - 20mb左右， 数据来源dev-tools的js profile
我猜测lottie占用的内存中为了播放性能和增加的layer缓存应该是有一定的比例，特别是面积比较大的动画, 不过最多的应该还是图片资源和对应的IImageElement对象
对于Vap来说，vap在web的本身就挂载了一个<video>标签在body上，其次是每一帧都绘制的canvas，其中还有每个实例都有的顶点着色器，片元着色器，视频纹理对象，和可能的融合图片纹理。 送同级别的大礼物，vap占用内存在10mb左右，vap没有见到过特别内存异常的大的情况。
Vap的渲染，在每一帧中调用gl.texImage2D把<video>当前帧以纹理的方式传递给webgl绘制
在glsl侧，片元着色器中还有根据融合信息进行计算gl_FragColor的真实值的计算，不过这些都是GPU的活儿了，不影响js主线程。
无论是lottie还是vap在加载并执行动画的时候，我觉得在开头加载都有比较大的负担。播放中性能差不多，都是会受到js主线程堵塞影响的。
打分：都差不多 lottie👍 vap👍
3.融合效果
双方都可以实现动态配置效果，常见的需求有，特效播放中替换成用户头像，用户昵称等等。
这里我觉得lottie完胜vap，vap的播放效果总有拖影，文字模糊不清等等问题，每一个都很难看。不过身为卑微的web端，大多用户用ios端和android看着融合效果不错就行了，别计较这么多
Lottie融合实际就是替换原有的图片即可，无论你是硬盘替换掉指定图片，还是以animationData的方式以内存形式返回给lottie都行。
Vap的话是根据你输入数据，把文字、图片等融合都转换为图片然后生成一个纹理，在json数据中指定时刻有融合数据出现的位置和alpha-mask位置，每次渲染中把这些坐标数据传递给glsl中的image_pos，在glsl里面片元着色器中根据坐标位置修改此像素点的颜色bgColor, 其中mask部分就是用来控制透明度的
打分 lottie👍 vap👎
4.播放效果
在web端，vap的播放真的有不少吐槽点，感觉就很不舒服，糊糊的，我觉得不如lottie清晰明了
不过从设计的角度看：设计更喜欢用vap，因为作为mp4，基本上任何他们想弄的特效mp4都可以播， lottie在这里就有不少限制了
最后打分lottie👍 vap👎
5.总结
不要我觉得，要老板觉得，最终效果好看用户愿意付钱，vap就是牛逼😁
