ae软件中文版官方下载 AE导出动效落地格式图，最大特点和劣势APNG是什么？

写在前面

我们先知道下AE导出动效落地格式主要有几种：

Gif图

1.最常见的当属Gif图，它几乎兼容所有主流的浏览器，实现出来只是非常便捷简单ae软件中文版官方下载，但是最致命的难题是，Gif图并不支持半透明/透明图，甚至会发生长期的白边。所以在使用中常常会被吐槽。

Apng/Webp图

2.Apng/Webp格式图，最大特征可以支持半透明/透明动图，并且没有白边，但是并没有广泛使用，由于一些兼容的问题

Json文件

3.json文件格式，设计师将AE制作的动画通过一个软件生成一个json文件ae软件中文版官方下载，开发同学可以直接在硬件中解读json文件来推动动画。不应该设计师再导出GIF或者序列帧。

Part1

一、GIF的优势和缺点

GIF的优势

优秀的压缩算法使其在必定程度上确保图像品质的同时将密度变得很小。可插入多帧，从而实现动画效果。可设定透明色以形成对象浮现于背景之上的效果。

GIF的劣势

GIF的alpha通道只有1bit，换言之，一个像素要么完全透明，要么完全不透明，而不像现今PNG的RGBA的8bitalpha通道，alpha值也可以和RGB一样都有255个透明值。这引起了所有GIF的照片带上透明度以后，边缘会发生显著的锯齿。所以即使你的顾客端必须展现带透明度的动图，GIF基本上可以不考虑

如果导出Gif图？

1.合成-添加到adobemediaencoder

2.以下2种方法可导出GIF图

Part2

二、APNG/WebP的优势和缺点APNG是哪个？

APNG是Mozilla在2008年公布的照片格式，本质上是在PNG的基础上加上一个扩展，而且十分简洁即可推动。因此无法完全支持RGBA。规范可以参见APNGSpecification。

然而这个规范没有加入PNG开发组，但是这些浏览器尚未支持了APNG。最主推的是Apple的Safari（OSX10.10以后的Safari，以及iOS8以后的Safari和内置WebView），已经完全支持。Firefox亲弟弟当然常常是支持的。Chrome桌面端即将从Chrome59开始支持，现在就差Edge了。具体支持程度参见浏览器兼容性。

APNG的优势

在于时间相当长，各种动图制作软件，优化工具都有相应的项目来支持。而且在iOS上的WebView里面是除GIF外，唯一官方支持的动图格式，因此即使做移动端开发必须WebView页引入动图，APNG还是必不可少的。

实际在线demo可以查看

APNG的劣势

APNG终究是在PNG的基础上扩展，并没有采用非常优异的压缩算法，而且遗憾的是，短期内APNG还没有引入到Chrome，也就意味着Android平台的WebView也没有原生支持，因此，移动研发又会遭遇两端兼容性难题，这个后话再说。

相关APNG工具

APNG图形化制作软件和在线预览:

APNG大小优化:APNGOptimizer：

APNGChrome插件:APNGforChrome

WebP是哪个？

WebP是Google在2010年公布的照片格式，完全开源，使用了VP8（就是WebM视频所用到的解码器）作为帧压缩编码器，而且在Chrome，Android上受到了原生的支持，具体规范参见:WebP

WebP的优势

同样的支持RGBA，而且静态WebP的压缩率比起同品质PNG平均要高上20%左右。现在各大App厂商已经有起初迁移WebP。除了静态的WebP，还有动态WebP格式(AnimatedWebP)支持。

WebP的劣势

其实动态WebP需要libwebp0.4以后才陆续支持，并必须mux和demux模块，如果自行编译需要切记。

APNG和WebP在Web平台实现

APNG浏览器支持

WebP浏览器支持，注意AnimatedWebP支持

如何安装下载BX-WebpApngExporter.zxp文件，点击此处下载%3A///bigxixi/webp_apng_exporter_for_AE/master/BX-WebpApngExporter.zxp根据自己的操作平台下载ZXP安装软件：

之后将BX-WebpApngExporter.zxp拖进安装软件（以及借助File->Open选择该文件安装）使用方法：

1、AE中开启必须导出的合成，在「合成设置」中设定好帧率。

2、在「窗口」-「扩展」中运行「BXWebp/ApngExpoter」。

3、选择要导入的格式的对应导出地址，并按照状况勾选「是否导出」。

（点击「WEBP地址」、「APNG地址」按钮来选择，也可以自动输入、修改。）

4、设置画质，取值为0-100之间的整数，数字越大画质越好，图片越大。

5、设置循环次数，取值为实数，0为无限循环。

Part3

三、json文件

json是哪个？

Lottie动画是哪个，简单地说，就是airbnb提供一种方式，让设计师将AE制作的动画通过一个软件生成一个json文件，开发同学可以直接在硬件中解读json文件来推动动画。不应该设计师再导出GIF或者序列帧。

json文件的优势

1、JSON更快：

JSON语法相当容易使用。我们可以仅使用语法来为我们提供简洁的数据剖析和更快的数据执行。由于它的语法相当小并且重量轻，这就是它以更快的方法执行响应的理由。

2、兼容性广泛：

它带有广泛的支持浏览器与操作平台的兼容性，因此使用JSON编码生成的应用程序不应该太多努力就可以使所有浏览器兼容。在研发之后，开发人员考虑使用不同的浏览器，但JSON提供了该功能。

3、共享数据的最佳工具：

JSON是任何大小或者音频，视频等共享数据的绝佳工具。这是由于JSON将数据存储在变量中，因此数据存储更易于。因此，JSON是WebAPI和Web开发的优秀文件格式。

4、在服务器上解析

在服务器端解析是研发人员想要的重要部分，如果解析在服务器端快速，那么只有客户可以受到人们的响应的迅速响应，所以在这些状况下JSON服务器端解析是强点表示我们在服务器端使用JSON。

json文件的劣势

1、没有错误处理

在JSON中没有JSON调用的出错处理。如果动态脚本插入有效，您将被调用并完美地获得响应。

如果没有插入，就什么也不会出现。它也是默默地失败了。例如，你能够从服务器捕获404错误，也不能更改或再次开启请求。然而，在期待合理的时间以后，你就早已超时。

2、安全性

JSON的另一个主要特点是，如果与不受认同的服务或不受认同的浏览器一起使用它会特别危险；由于JSON服务返回包括在变量调用中的JSON响应，如果它将与不受认同的浏览器一起使用，将由浏览器执行它可以被黑客袭击，这使托管Web应用程序易受诸多伤害。如果您准备使用JSON服务，那么熟知JSON所具备的威胁并认识如何保护它是十分重要。

3、支持工具有限

JSON只有有限的支持工具，我们可以在JSON开发过程中使用他们。

所需工具和插件：

AfterEffects

Bodymovin（AE插件）

下载地址：

安装使用教程：

Sketch、Figma

AEUX（sketch,figma&AE插件）

制作步骤：

01在Figma中绘制出矢量图形

02用AEUX插件将矢量图形导出到AE中

03在AE中制作动画

04打开bodymovin插件，生成json文件

05在Lottie官网预览一下

（具体地址）

确认没有疑问可以交付给开发。

需要注意得到点：

如果动画中带有渐变颜色，bodymovin导出json时会动画的色调会成为黑白。

解决这个难题的方法是：把AE切换成英文版，亲测可用！

问：为什么，我的新版本软件，导出还是有照片，没有直接生成一个单独的json或者为什么我导出之后预览是空白的？

答：因为插件中有一项修改必须勾选——

Settings—Assets—Includeinjson

此外也有众多女孩伴问视频可不可以直接导出json?

答：既然图片都可以includeinjson了，你把视频导出成序列帧，然后以截图方式再次导入，AE排序一下，不就可以导出json了嘛！

(关于排序这里再告诉你们一个小方法，先把所有照片长度裁剪成一帧，然后选中所有帧，右键—KeyframeAssistant—SequenceLayers,这样所有图片时常根据顺序首尾相接排序啦，效果如右图）

走到这一步

基本上就可以实现万物可json了！