DATAV设计技巧之WebP—真的可以让动图体积小、色彩丰富同时还不带边缘锯齿？
不少设计师同学在使用dataV的过程中，会经常遇到需要贴动态图去丰富大屏画面的情况。一般我们想到使用动态图，大家一定会先想到GIF图，这里简单科普下GIF：
GIF图形交换格式是一种位图图形文件格式,以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。
GIF的优点：
- 图像质量相对清晰
- 可插入多帧,从而实现动画效果。
- 可设置透明色以产生对象浮现于背景之上的效果
GIF的缺点：
- 由于采用了8位压缩,最多只能处理256种颜色（2的8次方）,故不宜应用于真彩图像。
- 只能支持完全透明或者完全不透明的像素显示，像素无法平滑过渡，边缘会有明显锯齿。
看完介绍，同学们应该大概了解GIF这种格式。我自己在用dataV搭建大屏的过程中，也经常使用GIF图，但是GIF的缺点非常明显，动图会存在颜色丢失以及边缘锯齿严重的问题，举个例子：
这是我在软件中渲染的粒子样式：
这是我导出带透明度的GIF：
大家可以感受下差别，GIF的边缘锯齿感强烈而且存在较大色差，直接放到大屏上效果非常糟糕。那么重点来了，有没有一种动图格式，体积小、色彩丰富的同时还没锯齿？
答案是肯定的！那就是WebP，下面将重点介绍：
WebP背景：
WebP是Google于2010年提出了一种新的图片压缩格式 – WebP，它给图片的优化提供了新的可能。
WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP在相同的SSIM（Structural Similarity Index，结构相似性）下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。
同时，谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。
目前国内外各大互联网公司已逐步使用WebP，科技博客GigaOM曾报道，YouTube的视频缩略图采用WebP后，网页加载速度提升了10%；谷歌网上应用商店采用WebP后，每天可节省几TB的带宽，页面平均加载时间大约减少1/3；谷歌移动应用市场采用WebP图片格式后，每天节省了50TB的存储空间；2014年腾讯新闻客户端应用了WebP后，流量峰值带宽降低9GB，网络连接延时不变的前提下，平均图片延时和数据下载延时降低了100ms；2014年空间装扮也全量转换成WebP，带宽上也有显著降低。
快速切入正题，首先看下我使用WebP后的现实效果：
对比下之前的GIF
两者对比可以很直观看到，WebP无论是色彩宽容度还是像素的透明表现上都比GIF好很多，那么如何制作这种动图格式呢？
这里通过动画制作软件AE（只要是可以导出PNG序列的动画软件都可以）以及动图转换软件iSparta（下载地址https://isparta.github.io/） 来做一次演示：
1.制作动画，此处省略一万步设计师制作动画的脑洞过程
2.选择PNG序列格式，注意通道也要选择RGB+alpha（这样导出的PNG才会带透明通道），导出动画
3.将你导出的PNG序列全选拖入到iSparta这个小软件当中，软件会识别序列图，生成一个项目卡
4.根据自己需求调节帧频、循环以及压缩质量并选择WEBP格式导出（图片解析的过程会有点小慢）
5.导出成功，发现系统无法直接预览，不用担心，你可以通过用浏览器查看
6.导入dataV，dataV现在已经支持这种动图格式了，只需通过基础图片组件直接导入即可
不得不说，dataV对WebP动图格式的支持，极大降低了dataV上使用动画特效的限制，设计师们总算可以拿着动图“特效”在大屏上愉快地玩耍了
