Compose - 使用 Lottie

Jomurphys

已于 2023-12-17 22:17:06 修改

阅读量762

点赞数

分类专栏： Compose 文章标签： android

于 2023-09-06 20:42:45 首次发布

本文链接：https://blog.csdn.net/HugMua/article/details/132721980

版权

Compose 专栏收录该内容

33 篇文章 5 订阅

订阅专栏

参考文章

一、添加依赖

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

spec	定义应加载哪个 LottieComposition，LottieComposition 就是咱们要加载的动画文件，在下面内容中会展开解释。
imageAssetsFolder	src/main/assets 中的子文件夹，包含此合成使用的导出图像
fontAssetsFolder	Lottie 将在默认文件夹中查找字体文件。字体将根据 Lottie json 文件中指定的系列名称进行匹配，默认值为“fonts”。
fontFileExtension	在 fontAssetsFolder 或 fontRemapping 中指定的字体文件的默认文件扩展名，默认为 ttf。
cacheKey	设置缓存键，设置后的后续调用将直接从缓存返回，而不必重新加载和解析动画，如果将此设置为 null 以跳过缓存。默认情况下，将从 LottieCompositionSpec 自动生成派生的缓存密钥。
onRetry	这是一个挂起函数，如果加载动画失败将调用的可选回调，函数的两个参数分别为传递失败的计数和上一次加载组合的尝试的异常。
LottieCompositionResult	可以通过它获取 error、isLoading、isComplete、isFailure、 isSuccess 属性，调用 await() 等待从一个 coroutine 中解析出的组件、调用 .value 获取解析后的对象 LottieComposition。

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

isPlaying	表示动画当前是否正在播放。需要注意的是，动画可能会因为达到目标迭代次数而结束，如果发生这种情况，就算将此参数设置为 true 动画也可能会停止。
restartOnPlay	暂停后重新播放是否从头开始。（如果 isPlaying 从 false 切换到 true，restartOnPlay 用来确定是否重置进度和迭代）
clipSpec	用于指定动画播放应该被剪辑到的边界。
speed	动画应该播放的速度，大于 1 的话会加快速度， 0 到 1 之间的话会减慢它的速度，小于 0 的话将向后播放。
iterations	动画在停止前应重复的次数（正整数），如果想要永远重复可以设置为 LottieConstants.IterateForever，其实就是 Integer.MAX_VALUE。
cancellationBehavior	动画在取消时的行为，如果有一个基于状态的转换，并希望在继续播放下一个动画之前完成播放，可以设置为 LottieCancellationBehavior.OnIterationFinish。

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,
)

modifier	可以设置控件的宽高等等。
outlineMasksAndMattes	启用此选项可通过概述蒙版和遮罩来调试慢速动画，遮罩和遮罩的性能开销将与所有遮罩遮罩组合的表面积成正比，需要注意的是，千万不要在正式版本中启用此功能。
applyOpacityToLayers	设置是否对每个图层而不是形状应用不透明度。不透明度通常直接应用于形状。在半透明形状重叠的情况下，将不透明度应用于图层会更准确，但会牺牲性能。
enableMergePaths	启用实验性合并路径支持，大多数具有合并路径的动画都希望启用此功能，但合并路径支持比其他一些渲染功能更受限制，所以默认为关闭。
dynamicProperties	允许动态更改动画的属性，可以通过rememberLottieDynamicProperties 来使用（本文不再展开描述）。
alignment	如果动画的大小与此可组合项的大小不同，则定义应将动画放置在此可组合对象中的位置。
contentScale	如果动画的大小与此此可组合项不同，则定义应如何缩放动画。