跨平台酷炫动画实现方案推荐（iOS,Android,Web）

没啥，都是用的别人的轮子。记录下，方便查找使用。

需求

需要用到这个，是因为当初在做中国电信视频客服 iOS SDK的时候，有些情境要实现比较复杂的动画，例如：送礼物、点赞……。而且，iOS端和Android端的效果要统一。一开始找的SVGA，还挺方便的，集成很简单。

后来发现，同类型的还有，这里记录下。

SVGA

SVGA 是YY（欢聚时代）开源的产品

SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 SVGAPlayer 之后直接使用。

具体和集成看官网 SVGA

目前中国电信手机客户端上的视频客服功能，有用到此方案，欢迎给客服点赞送花。

VAP

VAP(Video Animation Player) 是企鹅电竞开源的产品

VAP是用于播放酷炫动画的实现方案。

  • 相比Webp, Apng动图方案，具有高压缩率(素材更小)、硬件解码(解码更快)的优点
  • 相比Lottie，能实现更复杂的动画效果(比如粒子特效)

具体和集成看官网 VAP(Video Animation Player)

Lottie（矢量动画方案）

Lottie 是Airbnb开源的产品。

设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android、Web、React Native和Windows之上，无需其他额外操作。

具体和集成看官网 Lottie

GIF, Apng, Webp（动图方案）

这种方案在跨平台多端统一的效果不大好，这里只是提一下。

  • GIF: 只支持8位颜色，颜色丢失严重，解码性能低，无法满足特效效果
  • Apng, Webp: 能够满足特效效果，但文件大，软解效率低（低端的手机上，比如当年的红米1，解码过程甚至能导致整个直播间卡顿）

mp4（视频方案）

这种方案在跨平台多端统一的效果不大好，这里只是提一下。

采用H264编码，相比动图方案，有很高的压缩率，硬件解码效率很高，缺点很明显，无法支持透明背景