Compose笔记(六十四)--LottieAnimation

这一节主要了解一下Compose中的LottieAnimation，在Jetpack Compose中，LottieAnimation是一个用于渲染Lottie动画的Composable组件。它由Lottie-Android库提供支持，允许开发者在Android应用中轻松展示复杂的动画效果.简单总结如下:

API:
composition:Lottie 动画的解析结果，包含动画数据
progress:控制动画进度的函数，返回0f（开始）到1f（结束）之间的值。
outlineMasksAndMattes:是否对蒙版和遮罩启用轮廓描边
applyOpacityToLayers:是否将透明度应用到整个图层
enableMergePaths:是否启用After Effects的“合并路径”功能。
renderMode:选择渲染模式，影响动画绘制方式。
dynamicProperties:动态修改动画属性（如颜色、透明度）的回调接口。
asyncUpdates:控制动画帧更新的线程策略。

栗子:

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

import androidx.compose.foundation.layout.size import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.airbnb.lottie.compose.LottieAnimation import com.airbnb.lottie.compose.LottieCompositionSpec import com.airbnb.lottie.compose.rememberLottieComposition import com.example.composedemo0802.R @Composable fun LottieDemo() { val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation)) LottieAnimation( composition = composition, modifier = Modifier.size(200.dp) ) }

import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.size import androidx.compose.material3.Button import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.unit.dp import com.airbnb.lottie.RenderMode import com.airbnb.lottie.compose.LottieAnimation import com.airbnb.lottie.compose.LottieClipSpec import com.airbnb.lottie.compose.LottieCompositionSpec import com.airbnb.lottie.compose.LottieConstants import com.airbnb.lottie.compose.rememberLottieAnimatable import com.airbnb.lottie.compose.rememberLottieComposition import com.example.composedemo0802.R @Composable fun LottieDemo() { val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation)) val animatable = rememberLottieAnimatable() var isPlaying by remember { mutableStateOf(true) } LaunchedEffect(isPlaying) { if (isPlaying) { animatable.animate( composition = composition!!, clipSpec = LottieClipSpec.Progress(0f, 1f), speed = 1.5f, iterations = LottieConstants.IterateForever ) } } Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { LottieAnimation( composition = composition, progress = { animatable.value }, modifier = Modifier.size(300.dp), renderMode = RenderMode.HARDWARE, contentScale = ContentScale.Crop ) Spacer(modifier = Modifier.height(16.dp)) Button(onClick = { isPlaying = !isPlaying }) { Text(if (isPlaying) "Pause" else "Play") } } }

注意:
1 优先使用本地raw资源（而非assets或网络），加载更快更稳定。
2 避免在LottieAnimation内部频繁重建composition，用rememberLottieComposition缓存。
3 不要在列表（LazyColumn）中大量使用高帧率Lottie，可能影响滚动性能