Serie Lottie 1: Introducción y uso

@[toc]

un lote

Lottie es una biblioteca de animación de código abierto de Airbnb para Android, iOS, Web y Windows, que puede generar animaciones de After Effects en tiempo real. Por lo tanto, en la animación AE, el complemento Lottie se usa a menudo para generar archivos de animación JSON.

Dos orígenes y comunidad de Lottie

2.1 Origen

A principios del siglo XXI, Flash era el rey de la animación web, y sus especificaciones y restricciones eran arbitrarias, muchas de las cuales pueden no ajustarse a los principios del diseño de la experiencia del usuario. Con la desaparición de Flash, HTML se convirtió en el estándar de uso. y la estandarización de la experiencia del usuario, pero se implementó una animación en la página web, el esfuerzo y trabajo puesto es simplemente demasiado alto, y las animaciones realizadas por los diseñadores se limitan al desarrollo. Además de ser costoso y engorroso, la creación de animaciones desde cero en el código también puede resultar muy diferente del borrador de diseño. No fue hasta que apareció Lottie que llegó el punto de inflexión.

A Hernan Torrisi se le ocurrió la idea de exportar animaciones en AE en 2015, usando un complemento que creó llamado Bodymovin que puede exportar animaciones descritas en JSON. También lanzó el primer renderizador compatible con el formato y proporcionó un reproductor basado en JS para navegadores.

En 2017, los ingenieros de Airbnb vieron el potencial de la animación basada en JSON y escribieron bibliotecas de iOS y Android que podían generar archivos JSON, a los que llamaron "Lottie". Los desarrolladores de Airbnb lo utilizaron como una plataforma de código abierto, no solo para distribuirlo de forma gratuita, sino también para construir una comunidad.

2.2 Comunidad

LottieFiles : ( lottiefiles.com/ ) es una plataforma independiente de Airbnb donde los diseñadores pueden "cargar, probar, comprar y descargar animaciones", todo con una cuenta gratuita. LottieFiles también es un complemento AE similar a Bodymoving, pero con más funciones, lo que nos permite "previsualizar" animaciones, cargarlas en la plataforma LottieFiles, guardarlas en nuestra computadora, etc. Cuando se usa como complemento, tiene más funciones que Bodymoving. Plataforma de vista previa en línea: lottiefiles.com/tools/json-…

2.3 ¿Por qué Lottie?

Alta eficiencia y recuperación

Antes de que no existiera Lottie, generalmente se hacía desarrollando marcos de secuencia PNG, GIF o escribiéndolo usted mismo. Si se encontraban animaciones complejas, los desarrolladores generalmente las rechazaban. Las razones eran generalmente que esto no se podía lograr, o que el la animación requirió mucho tiempo, el ciclo de iteración de la versión es apretado, esta versión no se puede realizar, o te mostraré cuando tenga tiempo...  

En 2017 apareció Lottie, que permite a los diseñadores cargar animaciones en cualquier plataforma con la misma facilidad con la que envían imágenes. El diseñador anterior proporciona el video (archivo de efecto de movimiento) al desarrollador, para que el desarrollador pueda reproducir el archivo de video según sea necesario y luego se puede completar el efecto de movimiento.

volumen

¿Cómo afecta Lottie al tamaño del APK?

muy pequeña:

• ~1600 métodos ~1600 métodos
• 287kb sin comprimir 287kb sin comprimir

En comparación con las secuencias GIF y PNG, Lottie es un 600 % más pequeña y 10 veces más rápida de transferir, Lottie es pequeña y no se pixela (si solo se usa material vectorial).

La mayoría de los elementos usan mapas de bits, incluidas las gafas con un sentido de la tecnología y la serpentina de mosaicos, etc. Incluso si se usan mapas de bits, el tamaño total es de solo 100 KB

Ventajas de I+D

Los archivos Lottie se usan en iOS, Android, Web y React Native. Los desarrolladores ahora pueden ahorrar semanas al no tener que codificar cada plataforma individualmente para el movimiento.

• 对于设计师：可以充分发挥创意和设计，可以不用费力讲解复杂的函数曲线和细致的效果，开发能直接 100% 还原动画；不会像 GIF 等手段一样带来超大文件和锯齿边缘，可以流畅实现高清动画。
• 对于开发：可以通过简单的导入和简短的代码，高保真实现复杂动画；而且 lottie 发布之后处于持续更新，任何 issue 都可以很快响应和解决；性能流畅，很少卡顿；集团内已有洛丽塔、lottie 的降级、lottie 的小程序等相关支持。
• 对于 PD：可以在不增加工期的情况下，给产品增加更流畅细腻的动画。

2.4 When Lottie

如果把动效按展示形式分类可以分为，自播放动效与可交互动效。

1. 自播放动效（动效内容本身不会产生变化，不需要研发控制动效内容，由设计师完成实现的动效）——建议解决方案：Lottie
2. 可交互动效（随着数据的不同会产生变化的动效，需要研发配合设计师完成动效的内容）——不建议使用Lottie

2.5 Lottie不支持的效果

不是所有的动效 lottie 都能实现，希望可以认识到这一点，如果不清楚是否可以实现，可以先熟读 lottie的官方文档：

Supported Features

2.6 官方Demo和在线预览平台

下载市场

https://lottiefiles.com/

安卓example

http://airbnb.io/lottie/#/android?id=sample-app

在线预览平台

https://lottiefiles.com/tools/json-editor

三 使用介绍

3.1 基础使用

添加依赖：

implementation \'com.airbnb.android:lottie:5.2.0\'

添加视图

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:lottie_fileName="popeye.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

把用到的JSON文件放在assets文件夹下，如果导出时有images文件夹，一并放入assets文件夹；

• lottie_fileName属性：本地加载时指定JSON文件名，默认从assets文件夹中查找JSON文件。如果在aasets文件夹下找不到对应的JSON文件，就会抛出异常。文件除了可以使用.json格式以外，还可以使用.zip格式的压缩文件
• lottie_imageAssetsFolder属性：指定Lottie中图在assets目录下的哪个文件中。比如指定路径是Images/,程序就会去assets/Images/下查找。
• lottie_autoPlay是指是否自动播放，true就自动播放，反之不是，不指定默认false
• lottie_loop是否循环播放，默认fasle，只播放一次

3.2 加载的资源来源：

• Src/main/res/raw 中的 json 动画。
• Src/main/asset 中的 json 文件。
• Src/main/asset 中的 zip 文件。
• Src/main/asset 中的 dotLottie 文件。
• 指向 json 或 zip 文件的 URL。
• 一个 json 字符串。源可以来自任何东西，包括您自己的网络堆栈。
• 到 json 文件或 zip 文件的 InputStream。

3.3 LottieAnimationView自定义属性

lottie_rawRes：进行本地加载时也可以放在raw文件夹下，该属性用于指定在res->raw文件夹下的JSON文件名（不带.json后缀）；lottie_fileName和lottie_rawRes不能同时设置，不然会报错。官方更建议使用 lottie _ rawRes，因为可以通过 R 使用对动画的静态引用，而不仅仅使用字符串名称。

lottie_repeatMode：指定循环播放的循序，取值为repeat或reverse，repeat表示正常顺序播放，reverse表示倒序播放。

lottie_repeatCount ：指定循环次数，取值为整数类型

lottie_progress：用于指定动画初次显示时的进度，类型为float，取值范围为0~1。

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="match_parent"
        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_rawRes="@raw/popeye"
        app:lottie_progress="0.5"
        />

因为没有设置自动播放和循环播放，所以动画就会固定在进度为50%的位置。如果设置了自动播放和循环播放，则会看不到初始化设置的进度效果。

LottieAnimationView可设属性：

<resources>
    <attr format="reference" name="lottieAnimationViewStyle"/>
    <item name="lottie_layer_name" type="id"/>
    <declare-styleable name="LottieAnimationView">
        <attr format="string" name="lottie_fileName"/>
        <attr format="reference" name="lottie_rawRes"/>
        <attr format="string" name="lottie_url"/>
        <attr format="reference" name="lottie_fallbackRes"/>
        <attr format="boolean" name="lottie_autoPlay"/>
        <attr format="boolean" name="lottie_loop"/>
        <attr format="enum" name="lottie_repeatMode">
            <enum name="restart" value="1"/>
            <enum name="reverse" value="2"/>
        </attr>
        <attr format="integer" name="lottie_repeatCount"/>
        <attr format="string" name="lottie_imageAssetsFolder"/>
        <attr format="float" name="lottie_progress"/>
        <attr format="boolean" name="lottie_enableMergePathsForKitKatAndAbove"/>
        <attr format="color" name="lottie_colorFilter"/>
        <attr format="float" name="lottie_speed"/>
        <attr format="boolean" name="lottie_cacheComposition"/>
        <attr format="boolean" name="lottie_ignoreDisabledSystemAnimations"/>
        <attr format="boolean" name="lottie_clipToCompositionBounds"/>
        <!-- These values must be kept in sync with the RenderMode enum -->
        <attr format="enum" name="lottie_renderMode">
            <enum name="automatic" value="0"/>
            <enum name="hardware" value="1"/>
            <enum name="software" value="2"/>
        </attr>
    </declare-styleable>
</resources>

java代码设置：

LottieAnimationView animationView = (LottieAnimationView)findViewById(R.id.animation_view);
// 布局中不指定文件可以在此设置，路径设置同布局文件
animationView.setAnimation("hello-world.json");
// 是否循环播放
animationView.loop(true);
// 设置播放速率，例如：2代表播放速率是不设置时的二倍
animationView.setSpeed(2f);
// 开始播放
animationView.playAnimation();
 // 暂停播放
animationView.pauseAnimation();
// 取消播放
animationVIew.cancelAnimation();
// 设置播放进度
animationView.setProgress(0.5f);
// 判断是否正在播放
animationView.isAnimating();

setAnimation()有六种方法，可以直接设置动画的Json对象，或者设置Json文件相对路径名：

setAnimation(@RawRes final int rawRes)
setAnimation(final String assetName) 
setAnimationFromJson(String jsonString) //不建议使用
setAnimationFromJson(String jsonString, @Nullable String cacheKey)
setAnimation(JsonReader reader, @Nullable String cacheKey)
setAnimationFromUrl(String url)

3.4 动画

动画监听器

animationView.addAnimatorUpdateListener { animation ->
}
animationView.addAnimatorListener(...)
animationView.addPauseListener {
}

定制动画效果

尽管 playAnimation ()对于绝大多数用例来说已经足够了，但是您可以在更新回调中为您自己的 Animator 调用 setProgress (...)。这对于将动画与手势、下载进度或滚动位置等绑定非常有用。

// Custom animation speed or duration.
val animator = ValueAnimator.ofFloat(0f, 1f)
animator.addUpdateListener {
    animationView.setProgress(animation.animatedValue)
}
animator.start()

四 缓存和全局配置

4.1 动画缓存

默认情况下，所有 Lottie 动画都使用 LRU 缓存缓存。将为从 res/raw/或 asset/加载的动画创建默认缓存键（a cache key）。其他 API 需要设置缓存键。如果您为同一个动画并行地激发多个动画请求，比如回收视图中的一个愿望列表中心，那么后续的请求将加入现有的任务，因此它只被解析一次。

4.2 全局配置

当从网络加载动画时，使用你自己的网络堆栈而不是 Lottie 内置的网络堆栈；

为从网络获取的动画提供您自己的缓存目录，而不是使用 Lottie 的默认目录(cacheDir/Lottie _ network _ cache)。

启用系统设计器进行调试

Lottie.initialize(
    LottieConfig.Builder()
        .setEnableSystraceMarkers(true)
        .setNetworkFetcher(...)
        .setNetworkCacheDir(...)
)

五 Lottie vs Android Vector Drawable (AVD)

Lottie优势

• 支持一个更大的After Effects features特性集。参见完整列表 supported features 的支持特性。
• 手动设置进度，将动画挂接到手势、事件等。
• 从网络下载动画
• 动态回放速度
• Masks是反锯齿的
• 动态更改动画的特定部分的颜色

AVD优势

• 由于在 RenderThread 上运行的动画与主线程相比性能更快。

六 Lottie 对 APK 大小有什么影响？

(airbnb.io/lottie/#/an…)

非常小:

• ~1600 methods. ~ 1600种方法
• 287kb uncompressed. 287kb 未压缩

源码

例子源码 ： https://github.com/LucasXu01/lottiedemo

参考

•Lottie官网

•Lottie进阶和原理分析

•支持点击交互的Lottie-Android篇

•Lottie—json文件解析

•Lottie动画使用及原理分析

•如何在Lottie动画中获得可用的总帧数

•Flutter进阶教程——在Flutter中使用Lottie动画

•从设计师和开发的角度使用Lottie