从事 Android 开发的都知道 airbnb 的 Lottie 库，如今它也支持在 Jetpack Compose 中使用了。
http://airbnb.io/lottie/#/android-compose

1. 引入 lottie-compose

在 build.gradle 添加依赖如下：

 dependencies {...implementation "com.airbnb.android:lottie-compose:$lottieVersion"...
}

当前最新稳定版本是 4.1.0

记得添加 repository 的地址

allprojects {repositories {...maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }}
}

2. 基本使用

在 Jetpack Compose 中使用 Lottie 非常简单

@Composable
fun Loader() {val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.loading))val progress by animateLottieCompositionAsState(composition)LottieAnimation(composition,progress,)
}

LoadAnimation 是加载 Lottie 的 Composable ，他接受以下参数，

LottieCompose 是 Lottie json 文件解析后的信息，使用 rememberLottieComposition(spec) 保存解析后的状态。 LottieCompositionSpec 是一个枚举, 可以指定不同的数据源，比如 res/raw, assets, string 以及 network 等等：

val composition1 by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
val composition2 by rememberLottieComposition(LottieCompositionSpec.Url("https://..."))
// src/main/assets/animations/animation.json
val composition3 by rememberLottieComposition(LottieCompositionSpec.Asset("animations/animation.json"))

progress 是动画进度，后文介绍
其他动画配置，例如speed, dynamic properties, images, render mode (hardware or software) 等等

4. 动画进度

Compose 的动画也是通过 State 驱动运行的，Lottie动画也是一样，animateLottieCompositionAsState 类似 animate*AsState，LottieAnimatable 类似 Animatable

一般情况下，使用 animateLottieCompositionAsState() 控制动画进度足矣，如果想要在 LaunchEffect 中跑动画，可以使用 LottieAnimatable

animateLottieCompositionAsState()

val progress by animateLottieCompositionAsState(composition)

val progress by animateLottieCompositionAsState(composition,iterations = LottieConstants.IterateForever,
)

val progress by animateLottieCompositionAsState(composition,clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),
)

LottieAnimatable

@Stable
class MyHoistedState {val lottieAnimatable = LottieAnimatable()val somethingElse by mutableStateOf(0f)
}

val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.animation))
val lottieAnimatable = rememberLottieAnimatable()
LaunchedEffect(Unit) {lottieAnimatable.animate(composition,iteration = LottieConstants.IterateForever,clipSpec = LottieClipSpec.Progress(0.5f, 0.75f),)
}

Jetpack Compose 中使用 Lottie 动画相关推荐

详解Jetpack Compose中的Modifier修饰符
前言本文将会介绍Jetpack Compose中的Modifier.在谷歌官方文档中它的描述是这么一句话:Modifier元素是一个有序.不可变的集合,它可以往Jetpack Compose UI元 ...
了解 Jetpack Compose 中的重组
对事件变化的响应对于创建最佳用户界面很重要.在许多情况下,用户不会输入正确的内容,并且当用户更改首选项或位置时,UI 必须更改. 为了使用户界面保持最新,UI 框架 Jetpack Compose 提 ...
42. Compose1.4 如何在Jetpack Compose中为文本应用描边效果（OpenAi翻译）
探索Jetpack Compose中文本笔画效果的DrawStyle API Jetpack Compose最近为TextStyle增加了很多新的自定义选项,TextStyle.drawStyle就是 ...
Jetpack Compose 中的架构思想
Jetpack Compose 中的架构总览如果应用打算使用 Jetpack Compose 来开发,那么就可以跟以前的MVC.MVP.MVVM等乱七八糟的架构全部说拜拜,这些名词也将在Androi ...
Jetpack Compose中的Modifier
Modifier的基本使用 Modifier修饰符是Jetpack Compose中用来修饰组件的,提供常用的属性,写布局时几乎所有Composable组件的大部分属性都可以用Modifier 来修饰 ...
Jetpack Compose中的手势操作
点击事件监听点击事件非常简单,使用 clickable 和 combinedClickable 修饰符即可满足需求: @OptIn(ExperimentalFoundationApi::class) ...
Jetpack Compose中的Accompanist
accompanist是Jetpack Compose官方提供的一个辅助工具库,以提供那些在Jetpack Compose sdk中目前还没有的功能API. 权限依赖配置: repositories ...
在 Jetpack Compose 中安全地使用数据流
/ 今日科技快讯 / 11月17日下午,暴雪中国官方微博发布公告称,各位暴雪游戏的国服玩家,我们很遗憾地通知大家,随着我们与网之易公司现有授权协议的到期,自2023年1月24日0点起,所有&l ...
在VUE中使用Lottie动画
Lottie简介官方介绍:Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations ...

Jetpack Compose 中使用 Lottie 动画