您好。我是zm soft，去年（2023年底）以開發者身分註冊，開始發布應用程式。我們也計劃發布面向開發者的應用程式，有興趣的話請查看。
大家在應用程式中有使用動畫顯示嗎？只要有一點動畫，應用程式就會變得更容易理解，外觀也更好看，不是嗎？因此，今天我想寫一篇關於在Android應用程式中顯示動畫的文章。
LottieAnimation
我使用的是動畫顯示函式庫LottieAnimation。因為可以相對簡單地顯示輕量級動畫，所以我選擇使用它。
可以顯示哪些動畫/動畫種類
首先，這個函式庫的優點之一是可免費使用的動畫種類豐富。例如，有以下這類動畫。
這些動畫發布在LottieFiles的官方網站上。雖然付費動畫也很多，但僅篩選免費的動畫就已經足夠使用了。基本上，因為我既沒有從頭建立動畫的技能，也沒有那個精力，所以想要新增一些動態效果時，首先會想到從這個網站尋找可用的素材。例如，使用這類動畫，可以在首次顯示時告知使用者常用的點擊位置。我實際上使用了右側的動畫來為使用者提供操作引導。
重點：簡便性
在實作方面也可以相當簡單地處理。例如，如果只是想在固定的版面配置中顯示動畫，只需按以下方式定義就可以運行。不需要實作任何邏輯就能運行，是不是很棒？
Lottie的簡單實作方法
Lottie的實作非常簡單。只需將動畫嵌入到特定版面配置中，無需額外邏輯即可運行。
實作範例：
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Lottie的基本使用方法
使用Lottie的主要步驟如下：
- 引入函式庫（修改build.gradle）
- 取得並放置動畫檔案
- 設定版面配置檔案
- 自訂動畫
具體實作範例和程式碼
以下提供使用Lottie時的具體實作範例。包括函式庫的引入、動畫檔案的放置方法、版面配置檔案的設定方法以及動畫的自訂方法。
在build.gradle中新增/引入函式庫：
首先，引入函式庫以便能夠使用Lottie。
如果沒有相容性問題，請使用最新版本。
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
放置動畫檔案：
從LottieFiles官方網站下載喜歡的動畫檔案（.json），放置到應用程式的res/raw資料夾中。
設定版面配置檔案：
在XML版面配置中新增LottieAnimationView，使其能夠參照下載的動畫檔案。
自訂動畫：
根據需要自訂動畫的行為。在動畫設定中，可以進行以下操作：
- 是否循環播放
- 指定循環次數
- 指定播放速度（包括反向播放）
透過新增動態處理，可以在任意時間播放/停止，也可以改變播放速度。
首先，關於靜態指定方式。動畫行為根據以下設定而改變。
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
在此範例中，your_lottie_animation.json檔案以0.15倍播放速度自動播放並循環。
接下來是動態處理：
lottieAnimationView.playAnimation()
使用以上處理可以播放動畫。除了播放外，還可以透過更改設定來停止播放、改變速度等。也可以像以下這樣設定監聽器，偵測播放結束並進行處理：
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
注意事項和故障排除
Lottie非常方便，但有一些注意事項。特別是，物件位置的更改有時可能不會按預期工作。此外，我也將說明與動畫結束時的處理相關的堆疊溢位問題，以及onPause後的行為。
故障排除範例1：
這是我實作中的問題：動畫結束時的處理方式導致了堆疊溢位。具體來說，在動畫到達末尾時進行反向播放、循環播放和反向播放的處理存在問題。透過向主執行緒發布並重新加入佇列解決了這個問題：
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
故障排除範例2：
另一個需要注意的是onPause後的處理。為了避免不必要的操作，應該在背景停止動畫。
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
然而，如果在動畫結束時等進行處理，僅靠這個還不夠。因此，需要檢查父視圖是否已經分離並重新處理：
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
總結
Lottie是提升應用程式UI的強大工具。可免費使用的動畫資源豐富，實作也很簡單。理解注意事項並妥善處理，可以在應用程式開發中獲得巨大優勢。雖然有一些注意事項，但整體上非常易於使用，且有很多可免費使用的資源，因此我認為這是一個出色的函式庫。它無疑會對改善應用程式的外觀有所幫助，請務必嘗試一下。