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

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

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

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

适量图形，不会出现失真

占用空间比序列帧动画小

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

节省HMI的开发、调试时间

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

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

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

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

如果设定 app:lottie_fileName="other/HamburgerArrow.json"，那么lottie就会读取assets/other/HamburgerArrow.json。

void setAnimationFromJson(String jsonString, @Nullable String cacheKey）

void setCacheComposition(boolean cacheComposition)

Lottie的Demo中内置了很多官方自己开发的动画效果，目的是为我们展示Lottie的常见用法，作为开发者我们必须掌握，并在适当的时候运用到我们的应用中。

该效果展示了lottie支持动态修改json，让动画中的一小部分属性发生改变。

KeyPath 中的 LeftArmWave 是Json中的一个属性

修改的效果如下。注意看右手的摆动频率X3后比X1高，以至于录制的GIF直接丢帧了。

修改后的效果如下

该效果展示了动画文字效果。这个效果实现起来其实不难，从程序中捕获输入的字母，再替换成lottie的资源文件即可。

注意，这里其实用了两个lottieView，分别设定了不同的文字。

该效果展示通过监听点击事件来播放不同的lottie动画。这个效果最常见，APP中的点赞效果大多都是这样的实现思路。

在车载HMI开发中往往我们会在实现、调试UI上花费大量的时间，如果能够灵活的运用Lottie，就可以显著节省程序的开发时间。例如，光影、粒子等特效虽然可以也考虑用Kanzi等3D引擎实现，但是3D引擎会消耗成倍的SOC性能，实际开发过程中，简单的特效使用Lottie实现，可以极大的优化应用的性能，给用户一个更优秀的体验。

本篇很多内容参考了《Android自定义控件高级进阶与精彩实例(博文视点出品)》(启舰)摘要书评试读- 京东图书这本书的内容，写得相当不错，非常值得认真阅读。

下一篇来讲讲车载HMI开发时都会用到的一个系统组件 - Widget

还不知道什么是汽车HMI设计？进来带你快速了解

《Android自定义控件高级进阶与精彩实例(博文视点出品)》(启舰)摘要书评试读- 京东图书