Compose - 使用 Lottie

参考文章

一、添加依赖

implementation("com.airbnb.android:lottie-compose:6.1.0")

maven( "https://oss.sonatype.org/content/repositories/snapshots/")

二、使用

@Composable
fun SystemPage() {
    //解析动画文件
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.weather_rain))
    //转为状态
    val progress by animateLottieCompositionAsState(composition)
    //放入显示
    LottieAnimation(composition = composition, progress = progress)
}

2.1 加载动画文件

fun rememberLottieComposition(
    spec: LottieCompositionSpec,
    imageAssetsFolder: String? = null,
    fontAssetsFolder: String = "fonts/",
    fontFileExtension: String = ".ttf",
    cacheKey: String? = DefaultCacheKey,
    onRetry: suspend (failCount: Int, previousException: Throwable) -> Boolean = { _, _ -> false }
): LottieCompositionResult

2.1.1 从哪加载动画文件 spac

LottieCompositionSpec是一个密封接口，可以选择动画文件的来源（RawRws、Url、File、Assets、JsonString、ContentProvider）。

LottieCompositionSpec.RawRes(R.raw.animation)
LottieCompositionSpec.Url("https://...")
LottieCompositionSpec.Asset("animations/animation.json")

2.2.2 网络加载失败的处理 onRetry()

val retrySignal = rememberLottieRetrySignal()
val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("not a url"),
    onRetry = { failCount, exception ->
        retrySignal.awaitRetry()
        // Continue retrying. Return false to stop trying.
        true
    }
)
//然后从点击监听的地方调用 retySignal.retry() 来重新加载

2.2 设置动画播放

speed 设置播放速度，iterations 设置播放次数。

fun animateLottieCompositionAsState(
    composition: LottieComposition?,
    isPlaying: Boolean = true,
    restartOnPlay: Boolean = true,
    reverseOnRepeat: Boolean = false,
    clipSpec: LottieClipSpec? = null,
    speed: Float = 1f,
    iterations: Int = 1,
    cancellationBehavior: LottieCancellationBehavior = LottieCancellationBehavior.Immediately,
    ignoreSystemAnimatorScale: Boolean = false,
    useCompositionFrameRate: Boolean = false,
): LottieAnimationState

2.3 动画控件

fun LottieAnimation(
    composition: LottieComposition?,
    progress: () -> Float,
    modifier: Modifier = Modifier,
    outlineMasksAndMattes: Boolean = false,
    applyOpacityToLayers: Boolean = false,
    enableMergePaths: Boolean = false,
    renderMode: RenderMode = RenderMode.AUTOMATIC,
    maintainOriginalImageBounds: Boolean = false,
    dynamicProperties: LottieDynamicProperties? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    clipToCompositionBounds: Boolean = true,
    fontMap: Map<String, Typeface>? = null,
    asyncUpdates: AsyncUpdates = AsyncUpdates.AUTOMATIC,
)