Lottie 动画里有图片怎么办？设计师小姐姐也能帮你减少开发量！

一、序Hi，大家好，我是承香墨影！Lottie 是 Airbnb 开源的一套跨平台的完整解决方案，设计师只需要使用 After Effectes （之后简称 AE）设计出动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android 和 React Native之上，无需关心中间的实现细节。这样，对于不同的工作角...

weixin_30600503

55人浏览 · 2018-03-13 14:09:00

weixin_30600503 · 2018-03-13 14:09:00 发布

1621df61d298dada?w=900&h=500&f=jpeg&s=59431

一、序

Hi，大家好，我是承香墨影！

Lottie 是 Airbnb 开源的一套跨平台的完整解决方案，设计师只需要使用 After Effectes （之后简称 AE）设计出动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，就可以直接运用在 iOS、Android 和 React Native之上，无需关心中间的实现细节。

这样，对于不同的工作角色来说，Lottie 带来的都是更简洁的工作流。开发小哥哥不再担心动画实现困难，设计师小姐姐也不需要担心实现的效果会有偏差。

关于 Lottie 的基本使用，之前也写过一篇文章，不了解的同学可以先看看《聊聊 Airbnb 的 Lottie》。

不过当时的文章有些细节没有讲明白，那就是有时候设计师实现的的动画，其实也是在操作一些图片资源的变换，这样使用 Bodymovin 在 AE 上导出的时候，会同时导出一些图片资源。

那么，如何使用 Lottie 加载一个带图片的动画资源，就是我们今天需要讨论的主题。

二、需要图片资源的动画

今天主要讨论带图片资源的 Lottie 动画。

Lottie 提供的动画资源，其实是可以从很多途径进行加载的，例如你可以放在本地的 assets 目录下，或者放在线上动态下载。

下面我们就分情况来讲解如何加载一个有图片资源的 Lottie 动画，并且最后来说说如何让设计师把图片资源整合到 Lottie 的 JSON 文件中。

2.1 包内资源

有一些不经常变动的动画资源，我们会选择打包在 Apk 中，一般会放在 assets 目录下。

这其实是一种最简单的方式，Lottie 提供了一个 setImageAssetsFolder() 以及 app:imageAssetsFolder 属性，来为我们设置一个 Lottie 动画需要的图片资源在 assets 下的路径。

setImageAssetsFolder() 方法接受一个相对的目录路径，阅读它的文档就知道如何配置了。

1621df61d2bc951a?w=778&h=219&f=jpeg&s=40847

接下来我们举个例子来说明问题。

例如，我在 assets 目录下存放了我需要的动画资源，它的目录结构如下。

1621df61d2e40f66?w=217&h=140&f=jpeg&s=6515

这个时候，我在布局中写：

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:imageAssetsFolder="images/"
    app:lottie_autoPlay="false"
    app:lottie_fileName="question_like.json"
    app:lottie_loop="false" />

或者在代码里写（kotlin 示意）：

lottieView.imageAssetsFolder = "images/"
lottieView.setAnimation("xinfeng.json")
lottieView.loop(true)
lottieView.playAnimation()

这两种方式都是等效的，最终会去加载我们的动画资源。

1621df6def68f9fb?w=613&h=328&f=gif&s=69993

在这个动画中有三个图片资源，非常的简单，因为信封图片为白色，所以我将底色调整成了蓝色。

2.2 线上下载资源

最理想的方式是将图片打包在 Apk 中一起发布出去，但是对于一些需要经常变动动画的需求，是无法接受每次发布新版本来替换动画资源的。

这个时候，我们可以选择动态下发动画资源，也就是在需要的时候，提前将动画资源下载到本地的文件系统中。

此时，我们再使用 setImageAssetsFolder() 方法就没有效果了，因为本身图片就已经不在 assets 目录下。

继续在源码中找答案，实际上 Lottie 加载的图片资源，最终会指定到 ImageAssetsManager 的 bitmapForId() 方法，它的实现如下。

1621df61d2df906d?w=793&h=655&f=jpeg&s=95726

关键代码我已经用红框标记出来了，bitmapForId() 接收一个 String 类型的 id，它其实就是我们动画资源中，图片资源的名称。而 Lottie 允许我们在加载 assets 目录资源之前，设置一个代理，通过代理的 fetchBitmap() 方法，来提前加载一个图片资源，供 Lottie 动画使用。这里的图片加载代理，可以使用 setImageAssetDelegate() 方法进行设置。

接下来的步骤就简单了，我们从本地的文件系统中，加载一个动画文件的输入流，然后使用 setImageAssetsDelegate() 方法设置一个代理即可。

val fileInputStream = FileInputStream(File("/sdcard/xinfeng.json"))
LottieComposition.Factory.fromInputStream(this,fileInputStream,{ composition ->
    lottieView.setComposition(composition!!)
    lottieView.setImageAssetDelegate { asset ->
        BitmapFactory.decodeStream(assets.open(asset.dirName + asset.fileName))
    }
    lottieView.loop(true)
    lottieView.playAnimation()
})

动画效果和之前一样，就不再过多展示了。

这种方式其实也有点复杂了，因为需要经历一个文件下载，接下来让我们看看一个对开发来说，最简单的方案。