lottie

从UI设计到开发，Lottie使用全流程

使用lottie

Lottie 是一个 iOS、Android 和 React Native 库，可以实时渲染 After Effects 动画，让应用程序可以像使用静态图像一样轻松地使用动画。可以轻松地将高质量动画添加到任何本机应用程序。本文将简单的从UI开始，简单的记录如何使用Lottie框架，快速打造酷炫的动画项目。

UI

安装Bodymovin插件

Bodymovin 是 After Effects 的插件，可以将动画导出为 json 数据格式供 Lottie 使用。

1. 安装插件安装器 aescripts + aeplugins zxp installer 密码： 2jbb

安装aescripts + aeplugins zxp installer

2. 下载插件 Bodymovin 插件，插件包在目录https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp 中

3. 打开插件安装器，选择插件进行安装

打开插件目录

选择插件

4. 选择安装

出错

错误，这里是因为我还没有安装AE，所以先去安装AE去。。。

安装AE完成

安装插件到AE

安装成功

在插件列表显示安装成功的插件

这样插件就安装完成了，重启AE打开看看插件列表

正常显示插件

编辑

勾选

至于原因，后面会说明。

使用Bodymovin转换动画

1. 先将制作好的动画文件导入AE

我这里随便找了一测试的动画

导入测试动画

2. 打开插件

在下面的列表会显示你已导入的动画

动画列表

这时可以先点击设置按钮，设置你需要的属性，不过一般默认就可以了

在这里插入图片描述

3. 选择输出文件路径

选择文件保存到本地的路径

点击选择设置路径

路径设置完成

4. 最后就可以点击Render按钮，输出Json文件了

点击Render开始输出

出错了！！！

输出完成

在这里插入图片描述

动画文件的json代码

5. 验证json文件

如果想检验最后输出的json动画文件是否正常，有以下两种方法：

1. 在Bodymovin 插件中预览

预览

在预览界面选择本地文件

选择本地文件

点开始播放就可以预览了

在这里插入图片描述

2. 在 https://lottiefiles.com/preview 中预览

上传json文件

上传完成就自动播放预览了

最后，UI就可以将json文件发给开发，剩下的工作就由开发完成了

开发

集成Lottie

在app的 build.gradle

    //lottie
    implementation 'com.airbnb.android:lottie:4.2.0'

在project 的 build.gradle

allprojects {
    repositories {
        ...
        maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
    }
}

导入动画文件

导入动画文件有多重方式：

存放json文件在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑体" >src/main/res/raw</font></td> 中

存放json文件在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑体" >src/main/assets</font></td> 中

最常用的是这两种。

还有是将 zip文件放在 <td bgcolor=#FCE8E6><font color=#E35251 size =3 face ="黑体" >src/main/assets</font></td> 中等，不过本次测试未使用该方法

简单使用

在activity 的layout.xml中设置好布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        //控制动画是否自动播放
        app:lottie_autoPlay="true"
        //设置动画是否循环
        app:lottie_loop="true"
        //设置动画文件资源 ，来自src/main/res/raw
        app:lottie_rawRes="@raw/data"
        //设置动画文件资源 ，来自src/main/assets
        app:lottie_fileName="hello_world.json"
 />
</androidx.constraintlayout.widget.ConstraintLayout>

这样，就完成了简单的lottie动画显示了

lottie动画

补充

ImageView scaleType

从源码我们可以看到，LottieAnimationView其实本质也是一个ImageView，所以，是可以和正常的ImageView设置scaleType 为 centerCrop, centerInside, 或者fitXY的

@SuppressWarnings({"WeakerAccess"}) public class LottieAnimationView extends AppCompatImageView {