超详细！写给新人的 Lottie 快速上手指南（上）

前言

作为 UI 设计师，我们在平时的工作中，多多少少都会接触到一些动效相关的工作内容。而谈到动效的落地，我想 Lottie 这种方案是一定不能绕过去的。因为它推出的时间较早并且不断在更新迭代，网上可以找到很多相关的文章和教程，也方便我们进行了解和学习。虽然它不能实现光效、粒子这类的复杂的效果。但并不妨碍它仍然可以作为 UI 动效输出的重要选项。

刚接触动效输出的同学，可能很喜欢根据当下的项目，对比各种工具（例如 Lottie、SVGA、PAG 等）孰强孰弱，在心中做一个排名，选定一个工具作为今后动效输出的唯一方案。如果有这种工具，将大大降低设计和开发的成本，当然是好事。但到目前为止，似乎还没有发现这种唯一解。

我们接手不同的项目时，设计上要达成的目标以及实现中遇到的限制，都是不同的。各种工具之间都有不同的特点和优劣势，如果我们深入了解它们并做出一一对比，一定会找到适合这个项目的最优解。

如果能熟悉各种工具并能灵活运用，那一定会大大提高我们的工作效率。而且通过了解各种落地方案，我们可以提前预料一个动效大概能实现到什么程度，从而能在最开始就规划好我们的动画该怎样去设计。我想根据自己的项目经验，为大家分享一下 Lottie、PAG、SVGA 的功能和特点。PS：GIF、APNG、WEBP 等方式相对比较传统，文件体积较大，暂不列入讨论的范围内。

我们在学习 Lottie 的过程，一定会碰到两个难点，一个是设置项，一个是功能支持列表。设置项需要我们能了解一些开发相关理论知识，功能支持则需要我们根据限制条件在不同项目中灵活运用。如果我们能掌握这两个部分，动画效果的上限是非常高的。上篇的内容更偏理论基础，主要为大家介绍界面相关内容，里面包含设置项的介绍。在下篇，我会根据实际动画案例，来为大家介绍一下 Lottie 的功能支持以及如何灵活的运用它们。

背景介绍

1. 背景简介

官方：Lottie 是 Airbnb 推出的一个免费开源动画库，适用于 Web/Android/iOS/Windows。它可以把 bodymovin（AE 插件）导出的 json 文件解析成动画，并且在各平台上进行呈现。

Lottie 是以一位德国电影导演和剪影动画的最重要先驱 Lotte Reiniger（洛特·雷妮格）的名字命名的。她的著名作品《艾哈迈德王子历险记》（1926 年）——现存最早的长篇动画电影。

2. 原理解析

关于 lottie 的说法众说纷纭。有人说是动画库。有人说是动画输出工具，有人说是动画落地的解决方案。这些说法虽然没有问题，但是太笼统模糊，不太方便普通使用者的理解。那 lottie 到底是什么？

在实现的层面上讲，Lottie 是一个研发人员使用的动画库（各个平台都有自己的库）。如何理解库，简单举例，比如说现在有一串” 16,12″的数据，当用位置的规则来解析它，就成了位置信息 X16，Y12。当用宽高规则来解析它，就成了尺寸信息 W16，H12。能解析” 16,12″这串数据的规则可以有很多种，将这些所有的规则都整合在一起，就形成了一个库。

在工作流程中，设计师先通过 AE 里的 bodymovin 插件，把动画导出成 json 文件（json 文件里包含有很多类似“16,12”这样的数据）。研发人员利用 lottie 的动画库（包含有很多类似“位置”“宽高”这样的解析规则）来解析 json 里的数据并且渲染成动画。所以动画库的渲染过程和设计流程并没有什么关系。对 Lottie 的进一步解释，只是希望普通使用者能清晰的理解 lottie 的工作原理。当我们谈论它的时候，不管它有多少种叫法，只要我们理解它的原理就好了。

3. 工具特点

是比较早期的动效输出工具，国内的动效输出工具如 svga、pag 等工具，在研发过程中都选择对标 lottie 来进行功能的设计与改进。所以网上会找到很多关于 lottie 的文章和资料。这也方便使用者解决遇到的问题。lottie 支持纯矢量/图片两种格式的输出，也可以插入音频。通过功能支持列表可以看出，lottie 支持的平台很多，其中 web 端支持的最好，同时在矢量图形的解析上拥有很好的表现。

AE 功能支持列表： http://airbnb.io/lottie/#/supported-features

（因为功能支持列表所包含项目很多且在持续更新中，可能整理出一张列表后又会面临后续功能的改变，所以我们在学习 Lottie 规范的时候应该多去查阅官方给出的功能支持文档，并且结合自己项目实际的情况去理解。在下篇，我会分享功能列表的常用项，以实际案例为大家做演示）

lottie 基于 AE 的工作原理，对其中的矢量图形和原生动画（蒙版，轨道遮罩，父子级绑定等）有非常强的解析能力，千万不要小瞧这一点，基于这种能力，可以配合前端，做到对动画中的各个元素进行精确化控制，并且整个动画是矢量的（适配时就可以不用考虑屏幕分辨率）。如果对支持的功能有很深入的了解，是完全可以制作出动效炫酷体积较小可交互的纯矢量 lottie 动画。

bodymovin 下载地址： https://github.com/airbnb/lottie-web

zxp 文件的下载路径为：在链接页面中找到文件夹“build”——“extension”——“bodymovin.zxp”

就可以找到最新版本的 bodymovin 插件了。需要把插件安装在 zxp 安装器中。

zxp 下载地址： https://aescripts.com/learn/zxp-installer/

tips：首次在 AE 中安装插件脚本，无论是哪个脚本，记得在 AE”首选项”——“脚本和表达式”中，勾选“允许脚本写入文件和访问网络”。插件就可以正常使用了，如果之前设置过请忽略。

界面介绍

1. 常规界面

2. 设置界面

关于 Metadata 的猜想：该功能相对较新，之前没有在项目中实际使用过。所以以下是关于该功能的猜想。如果有童鞋实际使用过该功能，欢迎交流沟通~

在测试的过程中发现可以通过该功能往 json 文件里传很多参数进去，这也就意味着研发在更改动画的时候可以调用这些参数。下图仅以按钮的不同交互状态来举例，未必合理但能大概说明使用方法。实际工作中使用的空间可能非常大。

预览介绍

Lottiefiles： https://lottiefiles.com

Lottiefiles 是 Lottie 官方的动画预览工具，涵盖了非常多的平台。除了常用的 web 端，还有移动端(iOS 和安卓)和电脑端(Win 和 Mac)。而且在 AE、Figma 和 XD 中也有插件。web 端是比较常用的平台，可以支持的效果最多，里面也包含了完整的预览功能，其他平台的预览功能基本大同小异。所以在此处我们以 web 端的 Lottiefiles 来举例。另外，如果动画需要在移动端上实现，那么务必使用移动端的 Lottiefiles 来预览效果。

1. 常规界面

将文件拖入到网站任意界面就可以唤起预览窗口，预览有两种方式，一种是直接拖拽，一种是复制链接。当动画不包含位图或者位图已经置入进 json 中，则可以直接把 json 文件拖入窗口。如果动画包含位图，导出动画时会再多生成一个存放位图的 images 文件夹。预览带位图的动画，需要将 json 和 images 文件夹压缩成 zip 包，拖入进窗口。PS：除了 json 和 zip，拖入的方式还支持 dotLottie 格式，该格式是 Lottiefiles 推出的一种官方格式，但 json 更为常见，所以在此处只做了解。

另一种方式是复制链接到输入框，也可以进行预览。我们在 Lottiefiles 官网的发现（Discover）中，可以找到很多免费的动画。复制“Lottie Animation URL”中的链接到预览窗口，就可以进行预览以及后续的动画编辑功能，不过这种方式，只针对公开的动画。如果是未公开的动画，复制预览窗口中的“Asset Link”的链接也可以在其他设备的 Lottiefiles（各个端或者插件）上进行预览和编辑。

2. 编辑动画

在下篇，我会为大家介绍一下 Lottie 的功能支持以及如何灵活的运用它们。之后也会分享一些 lottie 实际动画案例。原创不易，如果喜欢这篇文章，请点赞收藏加关注哦^_^