學習筆記：

一、簡介

??Lottie 是一個可以在iOS、Android和React Native平臺，實時渲染After Effects動畫，使應用程序可以像使用靜態(tài)圖像一樣輕松地使用動畫的庫Lottie源碼。

二、添加 Lottie 依賴項

??在使用時，你需要在 build.gradle(app) 腳本文件中，添加相應的依賴：

    //lottie動畫庫-------start
    implementation 'com.airbnb.android:lottie:6.0.0'
    implementation "com.airbnb.android:lottie-compose:6.0.0"
    //lottie動畫庫-------end

三、Lottie 資源

??你可以通過 Lottie 官方網(wǎng)站 或其他途徑獲取到你想要添加的Lottie動畫對應靜態(tài) json 資源，或者你也可以使用URL方式。

• 如果你使用的是靜態(tài) json 文件方式，你可以將其放入 res/raw 、assets 目錄下。

• 如果你使用的是URL方式，后續(xù)需要加載 lottie 時，你可以選用 URL 方式。

四、創(chuàng)建 Lottie 動畫

??1、首先加載動畫資源：

        // 加在 Lottie資源
        val lottieComposition by rememberLottieComposition(
            // "lottie.json" 與 “l(fā)ottie/” 我這是在 assets 目錄里，“l(fā)ottie/” 存放著相關(guān)照片
            spec = LottieCompositionSpec.Asset("lottie.json"),
            imageAssetsFolder = "lottie/"
        )

??Lottie 還提供了其他加載動畫資源的方式：

sealed interface LottieCompositionSpec {

    /**
     * 從 res/raw 加載動畫。
     */
    @JvmInline
    value class RawRes(@androidx.annotation.RawRes val resId: Int) : LottieCompositionSpec

    /**
     * 從互聯(lián)網(wǎng)加載動畫
     */
    @JvmInline
    value class Url(val url: String) : LottieCompositionSpec

    /**
     * 從任意文件加載動畫
     */
    @JvmInline
    value class File(val fileName: String) : LottieCompositionSpec

    /**
     * 加載 asset 目錄下的靜態(tài)資源，即：手機目錄下的靜態(tài)資源
     */
    @JvmInline
    value class Asset(val assetName: String) : LottieCompositionSpec

    /**
     * 直接加載 json 字符串
     */
    @JvmInline
    value class JsonString(val jsonString: String) : LottieCompositionSpec

    /**
     * 從內(nèi)容提供程序 URI 加載動畫。
     */
    @JvmInline
    value class ContentProvider(val uri: Uri) : LottieCompositionSpec
}

??2、接著需要描述 Lottie 的動畫狀態(tài)：

        val lottieAnimationState by animateLottieCompositionAsState(
            composition = lottieComposition, // 動畫資源句柄
            isPlaying = true, // 動畫播放狀態(tài)
            speed = 1f, // 動畫速度狀態(tài)
            restartOnPlay = true,// 暫停后重新播放是否從頭開始
            iterations = iterations, // 設置循環(huán)播放次數(shù)
            cancellationBehavior = LottieCancellationBehavior.Immediately,  // 停止動畫時的方式（立即停止、延遲停止）
            )

最后，我們僅需要把動畫資源句柄和動畫狀態(tài)提供給 LottieAnimation Composable 即可：

        LottieAnimation(
            lottieComposition,
            lottieAnimationState,
            modifier = Modifier.size(200.dp.resize())
                .aspectRatio(1f) // 保持寬高比
                .scale(scaleX = 2f, scaleY = 2f),    // 縮放
            // 當動畫無法鋪滿布局時，就需要更改縮放規(guī)則了。
            contentScale = ContentScale.Crop    // 縮放規(guī)則
        )

五、最終源碼

    @Composable
    fun ShowLottieView() {
        // 加在 Lottie資源
        val lottieComposition by rememberLottieComposition(
            spec = LottieCompositionSpec.Asset("lottie.json"),
            imageAssetsFolder = "lottie/"
        )
        val lottieAnimationState by animateLottieCompositionAsState(
            composition = lottieComposition, // 動畫資源句柄
            isPlaying = true, // 動畫播放狀態(tài)
            speed = 1f, // 動畫速度狀態(tài)
            restartOnPlay = true,// 暫停后重新播放是否從頭開始
            iterations = iterations,// 設置循環(huán)播放
            cancellationBehavior = LottieCancellationBehavior.Immediately,

            )
        LottieAnimation(
            lottieComposition,
            lottieAnimationState,
            modifier = Modifier.size(200.dp.resize())
                .aspectRatio(1f) // 保持寬高比
                .scale(scaleX = 2f, scaleY = 2f),
            contentScale = ContentScale.Crop
        )
    }

這里我就不展示效果圖了，有不懂的可以私信。