前言
作为UI设计师，我们在平时的工作中，多多少少都会接触到一些动效相关的工作内容。而谈到动效的落地，我想Lottie这种方案是一定不能绕过去的。因为它推出的时间较早并且不断在更新迭代，网上可以找到很多相关的文章和教程，也方便我们进行了解和学习。虽然它不能实现光效、粒子这类的复杂的效果。但并不妨碍它仍然可以作为UI动效输出的重要选项。
刚接触动效输出的同学，可能很喜欢根据当下的项目，对比各种工具（例如Lottie、SVGA、PAG等）孰强孰弱，在心中做一个排名，选定一个工具作为今后动效输出的唯一方案。如果有这种工具，将大大降低设计和开发的成本，当然是好事。但到目前为止，似乎还没有发现这种唯一解。
我们接手不同的项目时，设计上要达成的目标以及实现中遇到的限制，都是不同的。各种工具之间都有不同的特点和优劣势，如果我们深入了解它们并做出一一对比，一定会找到适合这个项目的最优解。
如果能熟悉各种工具并能灵活运用，那一定会大大提高我们的工作效率。而且通过了解各种落地方案，我们可以提前预料一个动效大概能实现到什么程度，从而能在最开始就规划好我们的动画该怎样去设计。我想根据自己的项目经验，为大家分享一下Lottie、PAG、SVGA的功能和特点。PS：GIF、APNG、WEBP等方式相对比较传统，文件体积较大，暂不列入讨论的范围内。
我们在学习Lottie的过程，一定会碰到两个难点，一个是设置项，一个是功能支持列表。设置项需要我们能了解一些开发相关理论知识，功能支持则需要我们根据限制条件在不同项目中灵活运用。如果我们能掌握这两个部分，动画效果的上限是非常高的。上篇的内容更偏理论基础，主要为大家介绍界面相关内容，里面包含设置项的介绍。在下篇，我会根据实际动画案例，来为大家介绍一下Lottie的功能支持以及如何灵活的运用它们。
1.背景介绍
1.1背景简介
官方：Lottie是Airbnb推出的一个免费开源动画库，适用于Web/Android/iOS/Windows。它可以把bodymovin（AE插件）导出的json文件解析成动画，并且在各平台上进行呈现。Lottie是以一位德国电影导演和剪影动画的最重要先驱LotteReiniger（洛特·雷妮格）的名字命名的。她的著名作品《艾哈迈德王子历险记》（年）——现存最早的长篇动画电影。
1.2原理解析
关于lottie的说法众说纷纭。有人说是动画库。有人说是动画输出工具，有人说是动画落地的解决方案。这些说法虽然没有问题，但是太笼统模糊，不太方便普通使用者的理解。那lottie到底是什么？在实现的层面上讲，Lottie是一个研发人员使用的动画库（各个平台都有自己的库）。如何理解库，简单举例，比如说现在有一串"16,12"的数据，当用位置的规则来解析它，就成了位置信息X16，Y12。当用宽高规则来解析它，就成了尺寸信息W16，H12。能解析"16,12"这串数据的规则可以有很多种，将这些所有的规则都整合在一起，就形成了一个库。
在工作流程中，设计师先通过AE里的bodymovin插件，把动画导出成json文件（json文件里包含有很多类似“16,12”这样的数据）。研发人员利用lottie的动画库（包含有很多类似“位置”“宽高”这样的解析规则）来解析json里的数据并且渲染成动画。所以动画库的渲染过程和设计流程并没有什么关系。对Lottie的进一步解释，只是希望普通使用者能清晰的理解lottie的工作原理。当我们谈论它的时候，不管它有多少种叫法，只要我们理解它的原理就好了。
1.3工具特点
是比较早期的动效输出工具，国内的动效输出工具如svga、pag等工具，在研发过程中都选择对标lottie来进行功能的设计与改进。所以网上会找到很多关于lottie的文章和资料。这也方便使用者解决遇到的问题。lottie支持纯矢量/图片两种格式的输出，也可以插入音频。通过功能支持列表可以看出，lottie支持的平台很多，其中web端支持的最好，同时在矢量图形的解析上拥有很好的表现。
AE功能支持列表：