讓UI忙碌的安卓Lottie動畫渲染庫(一)

語言: CN / TW / HK

theme: condensed-night-purple

持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第27天,點選檢視活動詳情,希望大家多多支援,幫忙點個贊,謝謝!

前言

今天工作時突然在專案xml佈局看到了一個完全不認識的控制元件,一開始以為是自定義View之類的: XML <com.airbnb.lottie.LottieAnimationView android:id="@+id/lt_gift" android:layout_width="200dp" android:layout_height="200dp" app:lottie_autoPlay="true" app:lottie_fileName="lottie/gift.json" app:lottie_loop="true" app:lottie_repeatMode="restart"/> 但一看包所在名稱,再一結合這個控制元件的顯示效果與該佈局中的命名,我以為是用來專門載入GIF動圖的,但經過我在網上檢索,查閱一些部落格,訪問Lottie的GitHub專案地址後,我才有了大致的印象,原來這個就是為我們開發者省心,讓UI設計師忙碌的動畫載入利器。

正篇

開場說過,本人對此庫的認知也有限,本篇僅供參考用法,如有紕漏,望各位大佬能指正!

介紹

其實最好的介紹就是官方自我介紹,如下:

Snipaste_2022-10-28_23-01-08.png 大致意思就是,首先它能多個系統開發上使用,如:安卓Android,蘋果IOS,以及Windows、React Native、 Web上都可以使用。\ 而官方的自我介紹也很幽默:\ Lottie是一個適用於Android和iOS的移動庫,可以解析使用Bodymovin匯出為json的AE(Adobe After Effects)動畫,並在移動裝置上以本機方式呈現它們!第一次,可以讓設計師去建立和釋出這些精美的動畫,而不需要工程師煞費苦心地手動重新建立。他們說一張圖片勝過1000個單詞,所以這裡有13000個單詞。

總結而言,就是我們可以不用花費大量時間用程式碼除錯動畫,而是讓UI設計去製作好成品,我們直接用就行。

如何放入專案中

首先,因為是新的庫,我們需將包匯入到我們build.gradle(app)中: Gradle implementation 'com.airbnb.android:lottie:5.2.0'

image.png

接著就是文章開篇的程式碼,我們需要在XML佈局的合適位置放入: xml <com.airbnb.lottie.LottieAnimationView 使用Lottie android:id="@+id/lt_gift" id名 android:layout_width="200dp" 控制元件寬度 android:layout_height="200dp" 控制元件高度 app:lottie_autoPlay="true" 自動播放動畫(default: false) app:lottie_fileName="lottie/gift.json" 目錄下的json檔名(json檔案可以直接放到assets目錄下,比如“gift.json”,也可新建子目錄,比如"lottie/gift.json") app:lottie_loop="true" 迴圈播放(default:false) app:lottie_repeatMode="restart" 迴圈模式(default:restart) />

總結

本節我們看了如何將Lottie放入我們的安卓專案中並在XML中寫入,下節我們會繼續看它在邏輯程式碼中的使用方法,感謝您的觀看!