动画方案 Lottie 学习（三）之设计师小姐姐给的 Lottie 动画中“带图片”，如何预览？

一、Lottie 的动画资源分类

1.1 Lottie 资源的不同

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，真正的做到了在客户端 100% 还原设计师的动画效果。设计师只需要使用 After Effectes（AE）设计出动画，再使用 BodyMovin 插件将动画导出成 JSON 文件，就可以在 iOS、Android 和 RN 上 100% 还原动画效果。

Lottie 这种工作方式，是对不同的角色进行解耦，带来了更简洁的工作流。开发小哥哥不再担心动画实现困难，设计师小姐姐也不需要担心实现的效果会有偏差。

再说回到本文的主题，动画预览的问题。

设计师交付给我们的动画资源。都是静态的。虽然通常会有配套的动画播放视频。但是我们依然想在手机上真实的看看动画播放的效果，才能放心的投入编码的过程中。

如果你对 Lottie 有了解（不了解也没关系，文末有几篇介绍 Lottie 的文章，可供查阅），你就会知道，设计师交付的动画通常有两种：

1. 单独的 JSON 文件。

2. JSON + 图片资源。

对于单独的 JSON 动画文件，官网上有一个 h5-preview （https://www.lottiefiles.com/preview）的网站，将 JSON 文件拖拽进去就可以实现预览。同时在预览页面底部，会生成一个二维码，通过手机 App Lottie 中的扫码功能，就可以实现在手机端预览了。

而对于第二种动画资源，JSON + 图片文件的预览，就没这么方便了。无论是 Preview 页面还是 Lottie App，都无法直接预览 JSON + 图片这种动画效果。

1.2 为什么会有不同的格式

有人很奇怪，为什么 AE 做出的动画，导出的动画资源会有所不同。

其实这取决于 AE 动画的制作过程。如果动画操作的图片资源都是矢量图格式的，最终导出的动画就是一个单独的 JSON 文件，它会将矢量图硬编码到 JSON 文件中。

相反，如果 AE 动画操作的资源是一张张的图片，则在导出的 Lottie 动画资源中，就会包含一个 images 文件夹，其中就包含了 Lottie 动画所需要的图片文件。

就是这么一点区别，就导致了导出的动画资源不同。

如果有必要，我们可以倒推设计师小姐姐，将动画中所用到的图片都矢量化，最终只导出一个 JSON 文件供我们使用。但是如果这样操作，后续动画资源的替换就不够灵活。

例如上图这种动画，其实包含了三张图片资源，分别是信封、黄色的箭头、收信的文件夹。

如果后续的产品需求，说要在信封图片上加一个红心，很正常的需求对吧？此时若是使用的图片资源，设计师只需要再给出一张带红心的信封图片，开发替换一下图片资源就好了，大家都很方便简单。

你看，换一个动画效果可能就是换一个操作的图片资源就好了。本地资源当然随便换了，换 JSON 和换图片，对开发来说工作量是一样的。但是换个思路呢？动画中的图片，来自线上的资源，是根据场景动态设置的。除了穷举让设计师出很多套不同的 Lottie 资源，然后按需显示之外，使用带图片的 Lottie 动画，就显得非常简单了。

二、lottie动画预览

说完了为什么会存在带图片的 Lottie 动画，以及它的使用场景，如何在着手编码前，就预览设计师小姐姐交付的动画效果呢？

2.1 单独的json文件

单独的 Lottie-JSON 文件，预览非常的简单，官方提供的 proview 网页和 Lottie App 都提供了预览的方式。

2.2 JSON + 图片资源

其实到这里还是需要借助 Lottie App，在新版本的 Lottie App 的 Preview Tab 页面下，有个 “Enter a URL to a json or zip file”，选它就对了。

它接受的是一个 URL，并且支持导入 zip 文件，这里只需要传入一个 JSON + 图片 的 zip 包的 URL，就可以了。

压缩文件的结构如下：

我们可以在本机上，使用 Python 搭建一个最简单的 HTTP 服务器。在本地动画 ZIP 包文件的文件夹下，执行下面的命令。

python -m SimpleHttpServer 8099

该命令会在本机上搭建一个 HTTP 服务器，监听 8099 端口，了解更多可以参考这篇文字☞《一行 Python 命令的 HTTP 服务器》。

最开始我以为可以使用 Android 自己的文件系统路径来充当 URL，后来发现不行，必须是一个服务器上的 zip 包，才可以通过 Lottie App 进行预览。

参考

设计师小姐姐给的 Lottie 动画中“带图片”，如何预览？