背景
Lottie动画现在已经是很多应用中必备的动画，而Jetpack-Compose也是谷歌推出的代码式编写UI的新框架，一旦它们遇到一起了，又会产生怎样的碰撞呢？又会产生怎样的火花呢？
compose项目引进 Lottie-compose
implementation 'com.airbnb.android:lottie-compose:4.2.2'
在布局中使用LottieAnimation
常用的是下面两个方法，这里就不多做介绍了，官方已经介绍得很仔细了。
- LottieAnimation(LottieCompositionSpec, Modifier)
- LottieAnimation(LottieCompositionSpec, Progress, Modifier)
正题开始，下面我们要介绍的是如何动态替换动画资源
LottieAnimatable 类，对的，使用该类能实现我们要的结果，配合使用LaunchedEffect即可动态替换动画资源。
下面展示一个伪代码案例：
val anim0Composition = rememberLottieComposition(
LottieCompositionSpec.RawRes(R.raw.lottie_anim0),
"lottie/anim0"
)
val anim1Composition = rememberLottieComposition(
LottieCompositionSpec.RawRes(R.raw.anim1),
"lottie/anim1"
)
var selectIndex by remember { mutableStateOf(0) }
var touched by remember { mutableStateOf(false) }
val animation = rememberLottieAnimatable()
LaunchedEffect(selectIndex) { //如果主题变更，就切换动画
animation.animate(
when (selectIndex) {
1 -> anim1Composition
else -> anim0Composition
}.await()
)
}
LottieAnimation(
modifier = Modifier
.fillMaxSize()
.pointerInput(Unit) {
detectTapGestures {
selectedIndex = if(selectedIndex == 1) 0 else 1
}
},
progress = animation.progress,
composition = animation.composition
)
具体使用起来怎么样，大家可以去试一试。第一次使用Jetpack-Compose Lottie 确实花了一些时间去处理，其中一个问题是如果raw的资源使用的都是一个文件，也要复制多份放入raw文件中并引入代码中，不然图片资源无法替换，无法生效。
希望以上代码对您有所启发。
以上内容均为原创，如需转载，请注明出处，感谢！
