Jetpack Compose 中使用 Lottie 动画

在这里插入图片描述

从事 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 ,他接受以下参数,

  1. 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"))
  1. progress 是动画进度,后文介绍
  2. 其他动画配置,例如speed, dynamic properties, images, render mode (hardware or software) 等等

4. 动画进度


Compose 的动画也是通过 State 驱动运行的,Lottie动画也是一样,animateLottieCompositionAsState 类似 animate*AsStateLottieAnimatable 类似 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),
    )
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fundroid

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值