RE: 从零开始的车载Android HMI（一） - Lottie

原创

已于 2022-07-04 09:58:37 修改 · 3.8k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#android #ui #动画

于 2022-07-03 21:00:17 首次发布

本文介绍Lottie在车载人机界面(HMI)中的应用，包括其特点、使用方法及常见用法。Lottie是一种轻量级动画文件格式，支持跨平台发布高质量动画，适用于实现车载HMI中的复杂特效。

1.前言

多年以前汽车还是以机械仪表主体的年代，各大汽车主机厂商并不十分关注操作系统UI的交互功能，但是随着车载SOC算力的不断提高以及主机厂商对汽车座舱竞争的白热化。座舱的HMI在设计上在强调功能性的同时也开始关注UI的艺术性，HMI的设计师们期望艺术与功能应该协同工作，让用户沉浸在“第三空间”的体验中。

有了需求程序员就需要关注如何实施和落地，然而Android应用本身虽然有着完整的动画框架支持，但是开发复杂、调试耗时，大型的gif或逐帧动画对于CPU&内存占用都不太理想，所以许多Android的手机应用基本上不怎么有动画。而且车载HMI上越来越多的开始引入各种光影、粒子效果，如果基于Android的原生控件来实现这些粒子效果，难度非常大，这就需要今天的主角Lottie来实现了。

2.Lottie概述

Lottie是一种基于JSON的动画文件格式，它使设计师能够在任何平台上发布动画，就像发布静态资产一样简单。它们是在任何设备上工作的小文件，可以在不进行像素化的情况下放大或缩小。

GitHub：https://github.com/airbnb/lottie-android

官方文档：http://airbnb.io/lottie/

Lottie在车载HMI中的优势

适量图形，不会出现失真

占用空间比序列帧动画小

可以修改属性，动态生成可交互的动画（使用视频动画难以实现交互功能）

节省HMI的开发、调试时间

可以更轻松的实现粒子、光影等特效

Lottie的使用方法

在build.gradle中添加依赖

dependencies {
  def lottieVersion = "5.2.0"
  implementation 'com.airbnb.android:lottie:$lottieVersion'
}

使用LottieAnimationView
首先将lottie动画的json文件放在assets文件夹下

然后就可以在布局文件中使用LottieAnimationView了

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/dynamic_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="HamburgerArrow.json"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>

然后运行APP就可以看到动画效果

3.Lottie的常用属性&API

LottieAnimationView继承自AppCompatImageView，所以ImageView支持的属性，LottieAnimationView都是支持的，这部分就不再介绍了。

lottie_fileName
设定lottie动画所对应的json文件地址。json文件默认需要放置在assets下，设定时不需要再强调assets

app:lottie_fileName="HamburgerArrow.json"

如果设定 app:lottie_fileName=“other/HamburgerArrow.json”，那么lottie就会读取assets/other/HamburgerArrow.json。
void setAnimationFromJson(String jsonString, @Nullable String cacheKey）

lottie_rawRes
设定lottie动画的json文件地址。json文件除了可以放置assets文件夹下，还可以放在raw文件夹下。使用时需要注意，利用lottie_rawRes引入资源时，json文件名前需要加上@raw，并且文件名不带.json后缀

app:lottie_rawRes="@raw/name"

lottie_autoPlay
设定是否自动播放，取值为true | false
lottie_loop
设定是否循环播放，取值为true | false
lottie_url
当需要加载在线资源时，就可以使用lottie_url
void setAnimationFromUrl(String url)
void setAnimationFromUrl(String url, @N