动效格式+制作交付指南

来工作期间需求涉及到很多动画的实现，都是几经周折用了好几种格式最终才顺利交付。所以整体梳理了一下市面上比较流行的动效格式，以及在制作过程中应该以什么思路去做以便于最终更好交付～

一、视觉侧制作思路

二、开发侧交付思路

三、有序运动交付

四、无序运动交付

     4.1  兼容性程度

               4.1.1 前后端差异

                       4.1.1.1 技术栈支持差异

                       4.1.1.2 性能和优化需求差异

                       4.1.1.1 用户设备差异

     4.2 支持特效程度

     4.3 文件大小

     4.4 开发可控程度

视觉侧在制作过程中主要针对demo进行拆解，要兼顾 品质 &性能 & 成本 三者考虑

有序-描述 ： 基础的有序动效可以通过描述文档交付开发

部分有序+部分无序 - 组合 ： 描述文档+动效组合交付

完全无序 - 视频 ： 面临-格式选择

简单来说，梳理下思路：

简单来说，梳理下思路：

包括一些常见的缓动，在网上会有很多大家自行选择即可，下面是lofter内常见几种函数：

无序运动交付：指不可控、随机、不可被描述的运动

那就需要考虑到用什么格式去进行交付最佳，需要与开发提前沟通降低风险

主要分为三大类，第一大类序列帧（png/gif/Apng/webp）、第二大类开源工具（Lottie/SVGA）、第三大类视频（MP4）

当然视频格式很多大厂有自研的工具用来导透明通道

Tencent：vap&pag｜pag还在持续维护

YY直播：yyeva｜

以下，是简单的各类格式优劣势介绍：

具体按各种维度去细分又可以排出很多不同的顺序

对于前端而言 webp  <  apng  <  mp4  <  svga  <  lottie  <  gif

* 客户端-应用可以直接利用操作系统提供的多媒体处理能力，有时还可以通过内嵌的库或框架来增强对特定格式的支持

* 前端-应用的动画和图像格式支持则依赖于Web浏览器的能力。各主流浏览器针对不同格式的支持程度不一，而且可能会随着时间发展而改变（例如，随着Web标准的更新和浏览器的升级，新格式如WebP和APNG逐渐得到支持）

* 客户端-应用可能更关注性能和用户体验，倾向于使用最优化和最流畅的动画格式。因此，如果一个客户端平台（如iOS或Android）提供了对特定格式的高效支持（如Lottie、SVGA），那么这些格式可能会被优先选择。

* 前端-开发则更注重跨浏览器兼容性，因此可能偏好像GIF和MP4这样的广泛支持的格式。

客户端-应用需要适配的设备类型通常更为固定（如特定的手机型号或操作系统），开发者可以根据目标平台优化动画格式。

前端-开发则必须考虑到用户使用的设备和浏览器版本更加多样化，因此需要选择兼容性更强的格式以覆盖更广泛的用户群体。

对于实现特效程度而言lottie约等于svga，比如一些特效插件等即不可导出

其次是序列帧 gif（有锯齿）  ≈  webp  ≈  apng，但因为 gif 导出有锯齿所以复杂效果不推荐

最佳选手则是mp4视频格式可以支持各种特效，但如前面所说：视频格式很多大厂有自研的工具用来导透明通道例如 tencent：vap&pag｜pag还在持续维护、yy直播：yyeva｜

，没有自研工具的可以通过alpha通道视频去交付给研发同学

【Lottie】 Lottie支持复杂的动画和交互，可以通过JSON文件轻松修改动画，并且文件体积相比视频格式要小很多