如何将AE动效和开发交付-设计师篇

设计师做完动效怎么实现
这个相比大家都有疑点，下面文章作者将讲述从开始到实现整个流程～

在开始之前，先简单了解下Lottie是什么：Lottie  一个动画输出软件，其实介绍Lottie的文章已经很多了，但大多数是介绍lottie的原理、优势或开源库等等，这篇文章我想从一个设计师的角度出发，从如何安装使用，lottie在动画导出方面的边界以及如何解决这些问题，如何与工程师对接等方面聊下，你把它当作一篇Lottie的使用手册，提供给有需要的设计师同行们～

1、安装流程

简单介绍下安装流程：

1. 安装动画制作工具Adobe After Effects

2. 安装插件bodymovin（推荐在Adobe官网上免费下载安装）

网址： https://exchange.adobe.com/creativecloud.details.12557.html

安装后就可以在AE中 窗口 > 扩展 > Bodymovin 中看到该插件了

在安装后记得勾选AE中 首选项>脚本表达式>允许脚本写入和访问网络

2、如何使用

1.  首先完成（前期的动画资源）动画设计

2.  唤起Bodymovin的插件面板(窗口 > 扩展 > Bodymovin)选择要导出的合成，设置好导出文件位置，按下Render按钮，几秒钟后我们就会得到这样一个.json格式的文件，如果你在制作中使用了图片，还会输出一个包含所有图片的文件夹。

json

3.在导出的合成前设置一下 Bodymovin文件选项

3、预览动效

1.  检查：在给开发小哥哥之前，我们需要先预览一下，确保动画没有问题，再发送给开发。只需要打开预览网站将json文件拖入即可(需要注意下，这里预览的只是在web端实现的效果，如果想看在iOS或Android端的效果还需要下载对应的App，扫码预览)。

预览地址：https://lottiefiles.com/

2. 点击design>preview

preview

5.拖放您的Lottie（dotLottie或JSON）或ZIP（image+json）文件扔到此处点击Browse
 

预览

3、就会得到一下

4、交付

把lottie文件打包发给开发gg你的工作就完成了

资源包

最后和开发交互的时候要注意实际动效画面的大小（在具体呈现位置显示大小）～

loading