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自定义控件高级进阶与精彩实例(博文视点出品)》(启舰)摘要 书评 试读- 京东图书