Sketch设计的页面需要做动画，如何直接一键导入AE?

Gif文件太大，占空间。

项目快速迭代没有足够的开发资源来实现动画效果，经常被砍？

什么是Lottie动效

Lottie 是 Airbnb 出的一套跨平台的动画完整解决方案。

说白了就是设计师可以直接输出一个代码文件（Json）给技术，不管是Android，iOS还是Web都可以直接使用。

即使设计师不认识这个Json文件里的任何一个字，也可以从此翻身当家做主人，再也不用因为“代码实现不了”“写动画时间太长”“动效有时间再做吧”这些理由而放弃或者简化自己想要的动画效果。

Airbnb官网Lottie网站：https://airbnb.design/lottie/

Bodymovin

AE插件，直接导出AE动画为jaon文件。

1、需要准备

ZXP Installer是插件安装和卸载的三方安装软件，AE从CC15后不再支持官方插件安装，所以需要三方安装器（安装sketch倒入插件也需要用到）。

2、安装和使用

- 双击ZXP Installer，安装。

- 安装body movie

把bodymovin往ZXP Installer里面一拖。

- 设置

勾选AE — 首选项 — 脚本和表达式 — 允许写入（2019版本前，勾选在常规里）

- 调用

- 导出

3、预览

方法一

预览网站：https://lottiefiles.com/preview

直接将导出的jason拖入网站即可预览

自动生成二维码，手机下载“Lottie files”即可预览动效

自动生成二维码，下载Lottiefiles APP，可直接预览。

方法二

在导出jason文件时，直接选择导出demo，生成html文件，可直接预览。

4、总结

Sketch文件导入AE

1、插件AEUX（原sketch2ae）

原来我们想用sketch文件做动画，需要将sketch导入ae需要先导出svg，放入AI，再导出ai文件，再放入ae进行动效设计，AEUX可以直接在ae内接收sketch所上传的图层。

2、安装与使用

- sketch插件 

直接拖入sketch插件文件夹即可

- AE插件 

需要借助ZXP Installer，拖入ZXP Installer即可（与bodymovie相同）

- 面板翻译

- 使用

方法一：直接导入图层

方法二：导入jaon

一些坑

1、中文版AE,导出jaon有时候渐变颜色会丢失，分分钟成黑白片

解决方法：默认渐变填充组名字为“渐变填充+序号”需要修改为“gradient+序号”

2、线上预览图片丢失

线上Lottie files预览只能预览jason文件内容，如果动效内有图片，会显示不出来。

解决方法：设置图片资源保存到json内。

3、一些ae属性不支持，详见：

https://www.yuque.com/lottie/document/supported-features

无解，坐等插件升级。

总结

        虽然插件还有很多不完善的地方，但是和原先导出动效视频，并且分解动画给开发的形式，高效很多。

       导出Lottie动画也只是作为我们设计的补充的工具，我们可以结合gif，代码动画等灵活使用。创造更加高效、合理的设计方法。

插件下载：

https://pan.baidu.com/s/1vVa_9Mz3YVF8LNWlocDHEg  密码:2vh6

bodymovin插件位置：lottie-web-master—build—extension—bodymovin.zxp

Powered by Froala Editor