video downloadhelper需要合作应用_复杂帧动画之移动端video采坑实现

本文由 IMWeb

在企鹅辅导品牌页中，我们需要实现一个动画如下：

页面滚动到动画区域，播放动画, 对应动画部分如下：

帧动画当前的实现有以下几种方式：

1. GIF 动画

   大家比较熟悉的图片格式

2. lottie(http://airbnb.io/lottie/)

   Airbnb 开源项目，通过解析 AE 动画为 json 数据，支持跨平台的动画效果解决方案；lottie 在辅导中已经有实际应用，使用过的同学都表示对其实现效果和开发速度表示称赞和推荐，如果你还不了解 lottie, 推荐 lottie 系列学习文章(https://imweb.io/topic/5b23a745d4c96b9b1b4c4efc)

3. APNG (Animated Portable Network Graphics)

   基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，其诞生是为了替代老旧的 GIF 格式，但部分浏览器不支持，需要考虑兼容；

4. HTML video 元素

GIF 动画适用于处理色彩简单、动效简单的动画，如 logo 、 icon 图这样的小图动画，在上面需要实现的动画中明显细节比较多，区域也比较大，考虑到质量 GIF 排除在外

在使用哪种方式实现该动画上，结合同事 @ajaxchen 的调研结论：

1. lottie 在设计师通过 AE 制作了动画之后，通过 AE 插件 bodymovin(https://aescripts.com/bodymovin/) 将动画导出 json 给到我们前端开发，在使用这段 json 数据中，我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画，效果如下图， 左图为用 lottie 实现，右图为我我们的目标实现效果

   可以看到实现还是存在着差异，颜色、数字倾斜度、虚线的透视都没有达到预期，于是放弃lottie 的使用，但这并不否定 lottie 在实现其它动画的优秀效果

   

2. APNG

   在对设计师给到的分段的动画帧图片压缩之后，其实现结果 apng 大小高达 29M，webp 格式 17M， 如此庞大的体积