动效实现形式和动效交付的总结

---

前言

良好的沟通是成功的一半，动效实现离不开UI设计师和研发的互相沟通，不同的实现方式以达到不同的实现效果，研发则要兼顾效果和性能之间的关系。

一、动态设计的交付方式

交付方式

• 文件式交付
  通过提供动态格式文件的方式来达到预期效果，需要考虑文件大小，加载速度，显示清晰度等
• 参数式交付
  主要是对动态运动的文字表述，开发可以根据图文化的表述对动态进行代码还原。可以是角度、边框、颜色、大小等属性数据

主流格式

1. GIF
   GIF 对于互联网来说是一个传播率极高的古董级动态格式,通常用于网站里面的动态广告，聊天工具里面各种表情包。
   优点是兼容性高，适配Android，IOS，WEB，使用稳定性好，并且可实现循环以及首尾帧控制；缺点是压缩效果差，复杂点的动效体积大，显示效果最差，仅支持8位即256颜色。

2. WebP
   WebP是由18年谷歌发布提供支持库，WebP 目前支持有损和无损压缩以及动画和 alpha 透明度的图像格式（基于 VP8 视频格式），压缩率更好，稳定性较高（文件较小），并且可实现循环以及首尾帧控制，是比较不错的通用动态格式选择。

3. APNG
   APNG 是基于 PNG 格式扩展的一种动画格式，所以它保留了向下兼容 PNG 的特性，因此当解码器不支持 APNG 时，会默认展示第一帧图像；APNG 拥有 24 位图像和 8 位透明性，相比 GIF 拥有更高的显示效果。
   APNG压缩率比WebP高，兼容性比WebP差。

4. Lottie
   Lottie 是 Airbnb 开源的一个面向 iOS、Android、RN 的动画库，能分析 AE 导出的动画 json 文件，客户端通过引入 Lottie 的支持库来解析 json 文件，通过此方法原生 App 就可以像使用静态素材一样来实现出动画效果。
   Lottie 支持矢量（MG）动画，并最终效果通过解析渲染完成，因此具有比较高的兼容性，并且可以在极小的文件大小下，实现极佳的画质效果，同时兼容 Android、iOS、Web，是目前互联网产品中比较通用的解决方案；并且可以通过解析文件实现循环、首尾帧固定、图层颜色修改等操作。
   Lottie是实时渲染，对于复杂的动画内存和性能占用很高，所以适合不太复杂的动效。

5. VAP
   VAP（Video Animation Player）是企鹅电竞开发，用于播放酷炫动画的实现方案，它可以播放带有 Alpha 通道的视频。是一种拟 WebP、APNG 的动画解决方案，与之相比具有压缩率高（素材更小）、硬件解码速度快的优点，比 Lottie 能实现更复杂的动画效果（比如粒子特效）；并且 VAP 可以将自定义的属性合并到动画中。

6. PAG
   PAG 是腾讯自主研发的一个开源项目，它同时支持「矢量预合成」导出和「BMP 预合成」导出两种方式。
   在效果、新能、体验上，表现极佳，另外提供完善的AE插件、预览工具、SDK接入工具，方案已在GitHub开源。

二、动态文件成像原理

1. 透明通道序列帧
   简单来说是PNG序列，高级点通过帧间压缩来进行图片压缩。Android开发里面实现方式是帧动画。
2. 视频+透明通道
   是将 mp4 视频与相应的 alpha 通道视频叠加后，就可以将原视频表现得带有透明效果。
3. 矢量动画
   形成动画的物体、动作及时间都是通过代码来完成，也因为是纯代码动画，因此可以做到体量极小，性能也是极佳的。
4. 图片渲染动画
   指通过 json 格式的描述文件，将指定图片赋予运动、时长、动作，最终通过解析渲染出描述中的动画效果的形式。
5. 视频帧混合矢量
   指将「视频+透明通道」与「矢量动画」混合导出的动画表现形式，既保证了视频的全特效效果，又保留了矢量动画的最佳显示效果，并且没有增加动画文件体积。

三、场景选择

遇到动态设计需求时，在符合条件（例如实时反馈、聚焦动画、转场动画等）的情况下参数交付是最优的；而有些场景（例如重视觉效果呈现、复杂交互动画、动态展示等）优先使用文件交付。

建议的解决方案排序是 PAG＞VAP＞Lottie＞WebP/APNG…，例如在 iOS 平台，所有的 PAG 文件播放都有比较不错的体验，因此更建议使用 PAG 交付，而在 Android 端 WebP 的稳定性更好，因此在 Android 更建议使用 WebP，当然在 Web 端依然可以使用 Lottie、WebP 作为平替。

五、参考链接

• https://www.uisdc.com/motion-design-delivery