當前位置:編程學習大全網 - 圖片素材 - RE: 從零開始的車載Android HMI(壹) - Lottie

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自定義控件高級進階與精彩實例(博文視點出品)》(啟艦)摘要 書評 試讀- 京東圖書

  • 上一篇:地勢坤 君子以厚德載物的意思是什麽?
  • 下一篇:美國著名電影公司,公司的標誌是壹頭獅子它叫?
  • copyright 2024編程學習大全網