做好直接用！动效神器 Lottie 基础入门教学

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

疫情期间，在线生活迎来爆发 ，视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。

短视频行业的日活用户规模较平日增加 16.7%，日人均使用时长较平日增加 9.3%。长视频成为很多网友在家消磨时间的方式。腾讯视频独播剧《三生三世枕上书》和芒果TV独播剧《下一站是幸福》，更是让平台日活分别增加 22% 和 26%。

可以说，视频行业的利好趋势，基本上不受疫情影响。短期内疫情会带来较大增幅，但是疫情过去之后还会保持自己的增长节奏。

这几年也积累了一些关于视频编辑和相关产品的经验。今天来介绍一款可以将 AE（adobe Effect）文件导出 json 格式的工具，名叫 lottie。

什么是lottie

第一次接触它是在 3 年前，做视频社交的时候，需要做视频编辑功能，后来因为产品方向的变革，没有使用成功，但第一次的接触让阁主认识到这个软件的存在。

最近又在做视频模板相关的需求，做一个可编辑的视频模板，用户只需要在模板填充内容，就可以使用已有的酷炫视频资源，于是又接触到 Lottie。

当时遇到一个什么样的问题呢，设计师可以用 AE（Adobe Effect）设计出各种酷炫的视频效果，但开发真的要将设计师所做的效果显现出来并适配各个系统和各种大小的屏幕，会耗费很大的工程量，成本比较大，为了尽量缩小开发成本，于是引用了 lottie。

lottie 最大的好处，就是可以将做好的 AE 文件，直接导出 json 文件，让开发直接运用，基本上实现了 0 成本的开发量，真是太棒了，大大减少了设计师和开发之间的沟通成本。

怎么安装

1. 安装Adobe Effect，最好是安装英文版本的

lottie 是由 Airbnb 团队研发出来的，因为是国外的公司，所以汉化版本，或多或少会出现各种兼容的问题。

但别担心，各个设计软件的界面长得都差不多，基本能猜到各个图标是干什么的，以及相应的操作提示是什么意思，哪怕有一两个单词不认识，网上翻一下也就都懂了，界面英文不会太难。

2.下载文件并安装

Lottie安装文件链接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取码：6V4g

备用下载链接：https://share.weiyun.com/5dFxjC8

安装文件也是英文版本，解压后有 2 个文件，1 个是 ZXP Installer，另一个是 bodymovin.zxp，先安装 ZXP Installer，安装好了之后打开，会出现如下界面。bodymovin 是设计师用的插件，lottie 是开发侧要用的文件 json 文件，一般对外将两者形成的系统称为 lottie。

然后将 bodymovin.zxp 拖到界面去就完成了安装。

怎么运用

1. 设置AE脚本权限

路径为在「 AE-首选项-常规 」中勾选「允许脚本写入文件和访问网络」，英文路径就是「Adobe Effects」-「Preferences」-「Scripting&Expressions」-勾选「Allow Scripts to Write Files and Access Network」，如下图：

2. 用 AE 做好你想要的视频，这一步按各自的想要做的内容来

3. 导出

导出路径为「Windows」-「Extensions」-「Bodymovin」，如下图。

4. 选择相应要导出的文件，以及选择导出的路径

5. 做好 Bodymovin 的设置，设置项如下图

6. 点击绿色按钮「Render」就大功告成了

相关注意事项

如果出现如下图的现象，插件卡在某个图片上，导不出来，可以尝试以下几个方法：

在使用 bodymovin 的时候将电脑的语言系统也换成英文，如果不习惯，不用的时候再换回来中文。系统语言有时候也会影响导出的成功率，阁主用的是正版 AE 2020 会遇见语言问题，用 2017 英文版就不会，也跟 AE 软件本身版本相关。

导出 json 的路径如果含有空格，也可能导致不能导出，直接导出到桌面是最直接的。

太复杂的动画可能导出会有问题，简单的遮罩是支持的，建议不要用太复杂的逻辑做动效。

最后，总结一下，为了跟上时代的潮流，拓展自己的技能，可以尝试下视频相关的设计需求。而 Lottie 是其中能帮助团队节省开发效率，让设计师专心设计动效掌握主动权的工具。

Lottie安装文件链接：https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取码：6V4g

备用下载链接：https://share.weiyun.com/5dFxjC8

更多关于 Lottie 的教程：

比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）

动效设计，是 UI 设计当中不可或缺的一环。

比阿里犸良还强大！Lottie动效设计完全指南（导入篇）

上一篇文章《比阿里犸良还强大！

比阿里犸良还强大！Lottie动效设计完全指南

之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。

欢迎关注作者的微信公众号：「Sophia的玲珑阁」