lottie_零基础入门_写给设计师

导语: 什么是lottie

由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS，macOS，Android 还有 React Native 原生 APP 的文件库。

• 这些动画通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。

1. 插件下载安装

• 1.1 bodymovin插件下载

  • 1.1.1 下载ZXP Installer aescripts.com/learn/zxp-i… (官方)
  • 1.1.2 下载bodymovin github.com/airbnb/lott…

• 1.2 bodymovin插件安装

  • 1.2.1 Mac用户: 步骤一: 打开安装器 ZXP Installer，拖动 bodymovin.zxp 到安装器上。

步骤二: 安装需要一分钟左右，最后看到 The extension was successfully installed! 则表示插件安装成功。

2. 创建动画

第一步完成之后，准备工作就做好啦。 接下来介绍创建动画时，需要注意什么。举例：你在sketch中画好了动画素材，那么如何正确地将sketch中的矢量资源导入AE呢？

• 这一点非常重要！ 原因是：如何你导出的矢量资源是2倍图或者3倍图，会对性能造成负面影响。即便你的动画在网页上预览正常，放在手机中实际运行的时候也会出现卡顿，抖动等性能问题。

• 使用 AEUX 这个插件

  • 下载链接：aeux.io/

• 选中你要导入AE的资源，选择Selection to Ae

• 打开AE，打开AEUX插件

3. 使用bodymovin导出Json动画文件

在AE中设计好动画之后，接下来是导出的工作

• 3.1 设置AE 打开AE，首选项—常规，将允许脚本写入文件和访问网络选项勾选上。

• 3.2 打开bodymovin插件

• 窗口—扩展—Bodymovin
• 选择你想要导出的合成
• 选择保存路径
• 点击设置，选择 Glyphs 将字体转换成图形形状；Demo可以选择性勾选，如果勾选Demo，会同时导出一个html的动画预览文件
• 点击 Render 导出 data.jason 文件
• 将json发给开发即可

4. 在对应平台测试你的动画

• 4.1 Android从Google Play商店下载Lottie应用程序；iOS从App store下载即可

• 4.2 将json拖进该网站

• 网站链接:www.lottiefiles.com/preview!

• 4.3 打开lottie app，扫描网页中的二维码，即可观看在手机中的运行效果 （推荐使用这种方式预览动画。因为许多时候在网页中预览是正常的，但是实际运行在手机中就有性能问题。）

5. 相关文章

- lottie动画设计_免异常总结

juejin.im/post/5cdbac…

免异常总结是本篇文章的姊妹篇，主要总结了lottie在设计中所有需要注意的问题，遇到异常如何排查原因等。