Lottie 动效调研与实践

最新推荐文章于 2025-07-07 17:42:21 发布

AMing_阿明

最新推荐文章于 2025-07-07 17:42:21 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏：居理文章标签： android Lottie

本文链接：https://blog.csdn.net/qq_19986309/article/details/120329774

居理专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Lottie作为一个多端动效库的优势，如节省开发工作量，小巧的包体积等，并展示了如何在Android应用中集成和使用Lottie。文章还讨论了动态下发Lottie资源的方法，并提醒读者Lottie并不支持所有AE特效，实际应用中需根据场景选择合适的技术。最后，提出了在弱网环境下的加载性能和特效兼容性是Lottie的局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Lottie 概述

https://airbnb.design/lottie/ Lottie 官网

Lottie 是一个支持多端展示的动效库，相对于 OpenGL 、动画、GIF Lottie 有着他独有的一些优点和优势，例如对比原生动画 api 直接的就节省了开发很大程度上的编码工作量。只需要设计人员通过 AE 去到处他想要的效果即可，对比于 GIF GIF 相对效果差支持 8 位颜色，另外 Lottie 对于包体力增量也有很好的控制，非常值得我们去尝试和应用。

下方链接列出了 Lottie 所支持的设备平台以及功能

https://airbnb.io/lottie/#/supported-features Lottie 官网支持功能

Lottie 中文文档
https://www.yuque.com/lottie/document/readme

Lottie 当然可能也有他的一些不足点，已经有先驱给我们做了一些记录。如果我们开发过程中遇到一些 Lottie 的问题可以翻阅
https://zhuanlan.zhihu.com/p/59794085

在这里插入图片描述
Lottie 应用
Android 版本的 Lottie 目前迭代到的最新 release 版本是 3.7.0 (2021年4月)，我们将居理买房 App 中的 Lottie 升级到这个版本然后对其做一个实践

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/iv_tab_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

我们改造代码，将我们熟悉的 ImageView 修改为 LottieAnimationView ，实际上 LottieAnimationView 也继承自 ImageView。

LottieAnimationView 在 xml 当中支持相当对的自定义属性，例如指定加载的 Lottie 动效文件

在这里插入图片描述
大多数自定义属性都是以 Lottie 开头，我们这里就点到为止。后面会在代码实例中介绍更多的 Lottie 属性方法。

我们将从 AE 导出的 json 文件，放置到项目的 assets 文件夹

在这里插入图片描述
然后在代码中直接这样引用。

目前引用的场景是在 App 中底部 tab 的正反选

在这里插入图片描述
我们再来思考另外一个问题，我们的 APP 有很高的多样化的需求。根据不同的活动要下发不同的样式，底部 tab 也是如此。上面实践的例子是通过加载本地如果我们要动态下发该如何做呢？

通过查询 LottieAnimationView API 我们发现这样一个方法

/**
 * Load a lottie animation from a url. The url can be a json file or a zip file. Use a zip file if you have images. Simply zip them together and
 * lottie
 * will unzip and link the images automatically.
 * <p>
 * Under the hood, Lottie uses Java HttpURLConnection because it doesn't require any transitive networking dependencies. It will download the file
 * to the application cache under a temporary name. If the file successfully parses to a composition, it will rename the temporary file to one that
 * can be accessed immediately for subsequent requests. If the file does not parse to a composition, the temporary file will be deleted.
 * <p>
 * You can replace the default network stack or cache handling with a global {@link LottieConfig}
 *
 * @see LottieConfig.Builder
 * @see Lottie#initialize(LottieConfig)
 */
public void setAnimationFromUrl(String url) {
  LottieTask<LottieComposition> task = cacheComposition ?
      LottieCompositionFactory.fromUrl(getContext(), url) : LottieCompositionFactory.fromUrl(getContext(), url, null);
  setCompositionTask(task);
}