前言

相信打开这篇文章的你，多多少少都接触过动效设计，但不知落地方案你知多少，本期就分享几个业内设计大佬们常用，但还舍不得告诉人，超级好用的落地方案！

 质量更高的GIF 

GIF图是我们最熟悉的动图格式，它是一种有损格式，只支持8位256色，但它有着极强的兼容性，这让设计师又爱又恨，尤其输出透明的元素常常伴有锯齿和白边，所以对于透明的元素要慎用此格式，后面会介绍更好的方案。

对于一些需要输出GIF格式的动图，有几个技巧能助你输出更高质量的画质，首先在能接受动图大小的前提下，尽可能的调大帧速率，这样导出的动画更细腻柔和。

当在AE设计好的动画后一般是导出视频或序列帧，再用PS导出GIF图，这里推荐导出序列帧再用ps导出GIF图的方案，这样动图相对质量更高内存也更小一些。

还有一种比较快捷的方式就是用AE插件gifGun，一键导出GIF图，内存相对较小，质量次于序列帧导出的方式，如果只是导出效果观看，可以用这种快捷的方式，如果要落实到产品上，最好能够用序列帧输出更高品质的GIF。

AE插件gifGun

当输出的gif图过大时，这里推荐一个不错的压缩软件PPDuck，能够很好的压缩到更小的内存，对画质影响也较小。

软件PPDuck

 apng和webp动图格式

apng格式

apng格式诞生于2004年，是基于png格式的动画格式图片，它的动图后缀依然是.png，apng格式相对GIF格式有更多的优势，在色彩方面它完美支持1600万种颜色，对于渐变透明的元素，有着非常优秀的成像效果，下图所示apng格式元素完整呈现。

apng与gif对比

apng品质大大超越GIF图，并且相对GIF内存也非常更低，在web端对于主流的浏览器Firefox、Safari、Chrome都能够兼容，在移动设备上通过代码也同样可以完美支持，所以对于透明渐变的动画，推荐apng格式动画。

预览apng动图需要拖拽到浏览器中才可以查看动画，所以传播性没有GIF图强。

apng的导出有两种方式：

第一种是通过iSparta软件导出，步骤是通过AE导出动画的序列帧，然后选中全部序列帧拖拽到iSparta软件中点击开始即可导出apng，此软件一共可以导出三种格式，APNG/GIF/WEBP，GIF导出还是推荐上文讲的方式。

 iSparta软件

第二种格式依旧是用AE插件，便捷高效，质量也较为优秀，两种方式都可以用于产品中，插件也可以导出webp格式动图。

AE导出apng和webp插件

webp格式

webp格式由Google在2010年推出的格式，能替代众多图片格式，包括有损jpeg、无损png、动图gif，最重要的是在压缩率上全面超越gif和apng，兼容安卓系统，ios可能需要技术上的处理，web端上相对apng的兼容性上差一些，导出的方式跟apng一样，也是上文介绍的两种方式。

 CSS序列帧精灵图动画

我们都知道动画是有一张一张序列帧连续播放的效果，序列帧动画在web端的性能不是特别好，100张序列帧服务就要请求100次，这样就很容易造成卡顿都丢帧的现象，所以通常会拼成一张大图，这样的图称为精灵图或雪碧图。

当动画复杂较大时，手动拼成一张大图费时费力，所以这里介绍一款知乎大神西西写的AE脚本CSS Sprite Exporter，能够一键导出精灵图与开发所需的代码。

脚本安装后，选择文件—脚本—CSS Sprite Exporter即可使用。

CSS Sprite Exporter脚本

两个重要的选项：

最大宽度：默认为5000px，指的是序列帧平铺到这个数值时，开始平铺下一行，所以最终导出的大图宽度为5000px；

web兼容性：是针对较低版本的浏览器的兼容性的选项，当浏览器对默认导出的动画不兼容时可以跟开发沟通做其中的选项勾选；

参数设置好之后点击“生成”会导出两个文件，一个是代码，另一个是图片，双击html文件可以预览效果如下图，预览没问题就可以一并交给开发。

动画预览效果

 Lottie—json文件代码动画 

Lottie是Airbnb开源的一套跨平台解决方案，是近几年最主流的动画落地方式，在AE中的插件为Bodumovin 导出的格式为json文件，它的原理是将各种矢量图、位图及效果数据的集合打包生成一个json格式文件，若有位图则会有images文件夹，把这两项交付给开发即可。

Bodumovin插件

使用Lottie设计师在设计动画时有几个点要特别注意：

第一点：json文件也需要尽可能小，例如能用父子级功能就不要在多个图层上打关键帧，每个关键帧都是一个数据点，因此会占用更多的空间。

第二点：Lottie暂不支持AE中任何表达式和效果，不支持阴影、颜色叠加效果等。

第三点：alpha的遮罩效果虽然支持，但大面积的遮罩非常影响性能，所以尽可能不用或使用小面积的遮罩效果。

第四点：Bodumovin导出的图片会有损失，会出现黑阴影现象，所以导出后，需要替换成清晰的图片。

 设计师导出CSS动画代码 

设计师导出CSS代码当然是要借助工具，同样是介绍一款由知乎大神西西写的AE脚本AE2CSS，它可以帮助设计师从AE中导出动效的CSS代码，这款脚本支持图像和纯色层的所有基础动画属性并且支持表达式及父子级，遗憾的是一些复杂的特效不能支持。

此脚本也可以导出精灵图，但有些复杂的特效依旧不能成功导出，所以导出精灵图，还是推荐上文CSS Sprite Exporter脚本导出方式。

AE脚本AE2CSS

AE2CSS脚本导出的是代码和图片文件，这样的方式不仅减少了开发人员的工作量，而且画质质量无损内存更小，目前支持web和H5页面，对于做数据可视化动效用这款脚步输出代码是非常高效的方式。

 后语 

以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。

Powered by Froala Editor