导语: 什么是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动画设计_免异常总结
免异常总结是本篇文章的姊妹篇,主要总结了lottie在设计中所有需要注意的问题,遇到异常如何排查原因等。