AE动效落地必看教程_AE教程_设计教程

设计工作中我们经常需要用AE来完成一些动效的设计，好的动效不仅增加产品亮点，同时能提升用户的使用体验；那么在AE中做好的动效怎么落地呢？

今天设计先锋网就从AE常用的动效落地格式：SVGA、json、Apng、WebP、PNG序列、Gif 、MP4 7种动效格式入手，阐述每种格式的特点、输出用到的AE插件和脚本、如何使用对应插件落地动效，这3个方面分享，希望对大家有所帮助：

一、文件导入

1、从PSD导入-PSD文件导入AE

AE与PS有很好的兼容性，PS的图层以及各种样式都能无偏差的导入到AE中，在导入时将“导入为”选择：合成-保持图层大小，图层选项选择“可编辑的图层样式”

2、AEUX-Sketch导入AE

AEUX （前身叫Sketch2AE）是由 Google 团队动画设计师大佬 Adam Plouff 开发，运用在 Sketch 和 AE 的一组高效插件，能将 Sketch 里的图层以及整个画板一键导入到 AE 里，同时能在 AE 里解决图形分组和分层的问题，减少从设计稿到动效设计的衔接困难，目前该该插件也已支持支持Figma。

官网地址： https://aeux.io/

3、OVerload-AI与AE互导入

Overlord不仅可以实现AI导入AE，还能随时从AE导回AI修改，这对本身不适合用于绘制图形的AE来说，无疑是补上了一个短板。

最新的Overlord支持路径、形状、参数图形、剪切关系、文本、甚至大部分的渐变参数都能无偏差互导，并且可以设置导成子图层还是独立图层，可以说是非常方便了。

官网链接：https://www.battleaxe.co/overlord

二、常用的几种动效落地方式

1、Gif动画

GIF是以8位色（256种颜色）重现真彩色的图像，可动的位图，但质量较差，压缩到临界值时会出现锯齿边和白边（如果实在想做成透明的，就添加2px以上的白色描边锯齿边和白边会稍微好些），不支持半透明通道；

Gif动画导出插件：Gifgun

GifGun是一款可以直接在AE里一键创建输出GIF动画格式脚本，我们在Dribbbble，Behance，站酷所看到的GIF动画大部分得益于这个插件的输出。对于作品展示是个非常好用的插件。

Gif格式因为不支持半透明区域且容易有锯齿，如今的实际开发中已经有了Apng、Lottie等很多更好的替代方案，但在网页浏览、文档编辑等许多场景，还是需要使用Gif来演示动效或者作为封面缩略图。AE从2014版本后就不支持Gif导出了，而Gifgun就是一款能很好地导出Gif格式的插件。
GifGun一定程度保留了更好的色彩，以及大大压缩了gif文件的大小。在输出路径方面也具有很强的优势。

官网链接：https://aescripts.com/gifgun/

当然除了用插件导出gif，还有一种方法就是AE - 导出MOV - 拖进PS - 导出Gif使用GifGun前：AE - 导出MOV - 拖进PS - 导出Gif。

设计先锋网

AE动效落地必看教程