0.0°

聊一聊动效的几种输出方式

经验类型经验/观点
经验属性原创文章
经验版权不使用原创授权

关注

3020 0 2 2019-04-05

主要对比GIF、精灵图、Video、WebP、Apng、Lottie、SVGA、CSS3动画、Canvas的优缺点

GIF的全称是Graphics Interchange Format，可译为图形交换格式，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。如果碰到需要用真彩色的场合，那么GIF的表现力就有限了。是目前互联网广泛应用的网络传输图像格式之一。

优点：

浏览器原生支持，直接通过<img>标签即可插入页面，设计师只要制作完毕，就可以直接放在网页或原生客户端中，无需额外处理；
兼容性非常好，被所有浏览器或系统支持，包括备受嫌弃的IE；
其工作量主要集中在设计师一方，前端基本不需要花费额外精力与时间。

缺点：

颜色不够丰富，索引8位256色表现力十分有限，并且不支持半透明，不支持半透明，不支持半透明！如果制作有alpha通道的动图，边缘会有很明显的锯齿。如果该图有微妙的半透明投影，GIF实现出来更是惨不忍睹；
不论GIF是否可见，浏览器都会一直在渲染GIF图，当页面出现很多GIF图时，会出现明显卡顿，性能很差；
没有交互能力，无法人为控制暂停或播放；
如果作为动图的实现格式，输出文件大小经常会达到数M甚至更大，需要加载的时间比较长。

序列帧是可实现多张相同尺寸图片连续播放的组图，例如电影是25帧，就是每秒播放25张连续的图片。序列帧组件，可以用一帧一帧的图像文件来模拟连续的活动视频，常使用编好数字顺序的png图片组。

优点：

图片可无损压缩，无损意味着更高的精度；
支持Alpha通道，半透明、微妙的过渡、bling-bling的跑马灯等效果都是没问题的；
支持24位真彩色，能承载比GIF更丰富的颜色细节；
前端工程师可以自由控制播放、暂停、帧速率、动画时长等；
在动画制作过程中主要由设计师输出文件，前端工程师几乎不存在太多工作量。

缺点：

大量资源文件需要整合放置在客户端安装包内，如果资源过多会导致安装包体积过大；
单张图片大小不会很大，但是如果是帧速率较高、时间较长的高精度动画，在Web或H5上播放可能会因为设备或网络性能导致播放出现卡顿或中断。

以往网页中的视频只能通过Flash播放器进行播放，但现在一个<video>视频标签即可满足用户播放需求。原生支持的好处不仅仅在于免除插件的安装与升级，还有性能上的提升。

伴随着移动端H5营销推广的发展，视频逐渐得以在移动端大放异彩。将案例通过视频插入到H5中，实现出乎意料的效果并带来了疯狂的病毒式传播。

优点：

表现力十分优秀，几乎没有无法呈现的效果；
可以边加载边播放，缓解文件体积大带来的问题；
不需要工程师编码实现，由制作视频的人员来输出。

缺点：

虽然可以边下载边播放，但在弱网络环境下它的体积依旧是影响页面效果的重要因素；
由于存在解码过程，且视频分辨率普遍较高，比较消耗及其性能，带来发热耗电的问题；
交互能力比较弱，只能实现播放、暂停、进度调整；
移动网络下，部分Android手机会默认不播放，或者弹窗提示是否播放，或者视频解析错误；
视频本身无法做到显示透明通道；
第三方浏览器实现各异，有些浏览器会禁用默认的原生控件，采用自制播放器来播放。

WebP是一种新型图片文件格式，源于Google的开源视频格式WebM。WebP 在各大互联网公司已经使用得很多了，有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay等。

有报道称YouTube的视频缩略图采用WebP格式后，网页加载速度提升了10%；谷歌的网上商城上采用该格式图片后，每天节省了几TB的带宽，页面平均加载时间减少了1/3，移动应用上也节省了不少带宽。

优点：

图片可无损压缩，无损意味着更高的精度；
支持Alpha通道，半透明、微妙的过渡、bling-bling的跑马灯等效果都是没问题的；
支持24位真彩色，能承载比GIF更丰富的颜色细节；
安卓及Chrome原生支持；
文件体积会比同条件的GIF小50%左右，但是视觉效果更佳；
在动画制作过程中主要由设计师输出文件，前端工程师几乎不存在太多工作量。

缺点：

兼容性较差，目前只有opera、Chrome及安卓支持；
几乎没有交互能力，开发无法控制播放暂停等；
虽然文件体积小，但是播放时系统资源占用依旧比较大。

Apng诞生于2004年，属于png位图的动态扩展，它的第一帧为标准图像，剩余动画和帧速率等数据存放在png扩展数据里。因此，仅支持旧版png的浏览器或系统只会显示静止第一帧。它与gif的原理很相近，皆是对图片序列进行轮播。

优点：

图片可无损压缩，无损意味着更高的精度；
支持Alpha通道，半透明、微妙的过渡、bling-bling的跑马灯等效果都是没问题的；
支持24位真彩色，能承载比GIF更丰富的颜色细节；
前端工程师可以自由控制播放、暂停、帧速率、动画时长等；
在动画制作过程中主要由设计师输出文件，前端工程师几乎不存在太多工作量。

缺点：

大量资源文件需要整合放置在客户端安装包内，如果资源过多会导致安装包体积过大；
单张图片大小不会很大，但是如果是帧速率较高、时间较长的高精度动画，在Web或H5上播放可能会因为设备或网络性能导致播放出现卡顿或中断。

Lottie是Airbnb开源的一个支持 Android、iOS、Web，利用json文件的方式快速实现动画效果的库。

通过Bodymovin这个AE的插件，可以将AE设计好的动画导出为json格式的文件。交给开发同学，开发同学通过集成Lottie库，就可以读取设计同学给到的json文件，在程序中通过几行代码就可以实现原本要花费1天甚至更久的时间来实现的动画啦。

优点：

完全由设计师设计动画，开发无需编写动画,只需加载；
Android、iOS、Web等多端支持；
扁平、路径等矢量风格动画完美实现；
开发同学可手动设置进度,绑定手势,交互事件等；
支持服务端 URL 方式创建。所以可以通过服务端配置json文件，随时替换客户端的动画，不用通过发版本就可以做到；
性能佳，显示效果完美。

缺点：

AE中可以使用的效果比较有限；
动画使用位图后,资源消耗较大，并且除json文件外，还需要外链img文件夹；
最新版本Bodymovin支持将位图转换为Base64编码并放进json文件，但是只有最新版Web与Android支持；
关键帧与曲线算法的记录特性导致有一定几率出现动画卡顿或出错的情况。

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

优点：