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

最新推荐文章于 2025-03-04 10:39:38 发布

承香墨影

最新推荐文章于 2025-03-04 10:39:38 发布

阅读量9.5k

点赞数 1

本文链接：https://blog.csdn.net/plokmju88/article/details/103354665

版权

一、序

大家好，我是承香墨影！

我又来写 Airbnb 开源的 Lottie 动画了，之前写的几篇文章，反响还不错，今天继续说说 Lottie 预览效果的问题，单独的 Lottie-JSON 文件，预览非常的简单，官方提供的 proview 网页和 Lottie App 都提供了预览的方式。

但是还有另外一种 Lottie 动画资源，是 JSON + 图片文件的动画资源，此时就无法直接预览了。

本文就来说说，如何在开始编码前，在手机上预览带图片资源的 Lottie 动画效果。

二、Lottie 的动画资源分类

2.1 Lottie 资源的不同

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

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

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

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

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

单独的 JSON 文件。
JSON + 图片资源。

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

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

2.2 为什么会有不同的格式

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

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

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

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

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

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

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

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