多年以前汽車還是以機械儀表主體的年代,各大汽車主機廠商並不十分關註操作系統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自定義控件高級進階與精彩實例(博文視點出品)》(啟艦)摘要 書評 試讀- 京東圖書