前言

我們之前有提到如何讓元件有動畫效果，今天我們來講一下如何在在 Android 中使用 Lottie動畫

Lottie

Lottie 動畫是一種使用 JSON 格式來描述的向量動畫。它由 Airbnb 的工程師開發，是一種輕量級的動畫格式，旨在讓高品質的動畫可以在各種平台上輕鬆實現和渲染。Lottie 動畫通常是從 Adobe After Effects 中使用 Bodymovin 插件導出，這個插件會將動畫轉換為 JSON 格式，使其可以在網頁、iOS、Android 和其他平台上使用 Lottie 解析器進行播放。
同時Lottie 文件比傳統的 GIF 或影片文件小得多，並且Lottie是向量圖形，這意味著動畫可以在不同解析度下保持清晰，不會因放大或縮小而失真。

圖片來源: https://medium.com/hardwareandro/what-is-lottie-6253a34fb99e

在Android中使用Lottie動畫

首先，我們需要在build.gradle(APP)中添加Lottie的依賴。

1.添加 Lottie 依賴

dependencies {
    implementation("com.airbnb.android:lottie:6.0.0")
    implementation("com.airbnb.android:lottie-compose:6.0.0") // 新增 Lottie Compose 的依賴
    implementation("androidx.activity:activity-compose:1.7.0")
}

2.設置 Lottie 動畫檔案

我們可以從Lottiefiles網站下載免費的Lottie 動畫，將下載的 Lottie JSON 文件放到 src/main/res/raw 資料夾下（如果沒有raw 資料夾，請自行創建）。

3.程式碼

• kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.airbnb.lottie.compose.*

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LottieAnimationExample()
        }
    }
}

@Composable
fun LottieAnimationExample() {
    // 建立 LottieAnimatable 來控制動畫的狀態
    val lottieAnimatable = rememberLottieAnimatable()
    // 加載 Lottie 動畫的組合
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.your_animation_file))

    // 記錄動畫的播放狀態
    var isPlaying by remember { mutableStateOf(true) }

    // 如果有動畫組合，則控制播放狀態
    LaunchedEffect(composition, isPlaying) {
        if (composition != null) {
            if (isPlaying) {
                // 設置動畫無限迴圈播放
                lottieAnimatable.animate(composition, iterations = LottieConstants.IterateForever)
            } else {
                // 使用 snapTo 方法暫停動畫，並設置進度為目前的進度
                lottieAnimatable.snapTo(composition!!, lottieAnimatable.progress)
            }
        }
    }

    // 佈局：使用 Box 將動畫置中
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        // 顯示 Lottie 動畫
        LottieAnimation(
            composition = composition,
            progress = lottieAnimatable.progress,
            modifier = Modifier.size(200.dp)
        )

        // 下方添加控制按鈕
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 250.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                isPlaying = !isPlaying // 切換播放狀態
            }) {
                Text(if (isPlaying) "暫停動畫" else "播放動畫")
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LottieAnimationPreview() {
    LottieAnimationExample()
}

上面的程式碼使用使用rememberLottieComposition加載raw中的Lottie JSON文件，並使用rememberLottieAnimatable()用來記錄動畫的播放進度，並控制動畫的播放和暫停。
使用LaunchedEffect監控composition和 isPlaying 的變化。當 isPlaying 為 true 時，讓動畫無限循環播放；當 isPlaying 為 false 時，使用 snapTo 停下動畫。
呈現效果如下

後話

今天我們介紹了Lottie，Lottie 動畫使用 JSON 格式來描述動畫，比GIF或影片等傳統動畫格式的檔案要小得多。可以有效減少APP的大小並節省裝置的儲存空間。並且在官網有提供免費的動畫範本，開發者和設計師可以直接使用或修改，節省動畫製作的時間。
那今天我們的內容就到這裡，讓我們明天再見。