JetpackCompose从入门到实战学习笔记10——Lottie在compose中的简单使用
Lottie动画现在已经是很多应用中必备的动画，而Jetpack-Compose也是谷歌推出的代码式编写UI的新框架，一旦它们遇到一起了，又会产生怎样的碰撞呢？又会产生怎样的火花呢？
1.在App的build.gradle中添加如下依赖：
在这里插入图片描述
implementation "com.airbnb.android:lottie-compose:$lottieVersion"
2.项目的build.gradle配置：
buildscript {
ext {
compose_ui_version = '1.2.0'
lottieVersion = '5.0.1'
}
}
3.基本使用：
@Preview
@Composable
fun LottieSample() {
var isPlaying by remember {
mutableStateOf(true)
}
var speed by remember {
mutableStateOf(1f)
}
val lottieComposition by rememberLottieComposition(
//spec = RawRes(R.raw.img_practice),
spec = LottieCompositionSpec.Asset("sound.json")
)
val lottieAnimationState by animateLottieCompositionAsState (
composition = lottieComposition,
iterations = LottieConstants.IterateForever,
isPlaying = isPlaying,
speed = speed,
restartOnPlay = false
)
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(
text = "Lottie Animation In Jetpack Compose",
fontSize = 30.sp
)
LottieAnimation(
lottieComposition,
lottieAnimationState,
modifier = Modifier.size(300.dp)
)
Row(
horizontalArrangement = Arrangement.SpaceAround,
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Button(
onClick = {
speed = max(speed - 0.25f, 0f)
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = "-",
color = Color.White,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
)
}
Text(
text = "Speed ( $speed ) ",
color = Color.Black,
fontWeight = FontWeight.Bold,
fontSize = 15.sp, modifier = Modifier.padding(horizontal = 10.dp)
)
Button(
onClick = {
speed += 0.25f
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = "+",
color = Color.White,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
}
}
Button(
onClick = {
isPlaying = !isPlaying
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = if (isPlaying) "Pause" else "Play",
color = Color.White
)
}
}
}
}
}
4.完整代码如下：
package com.example.lottiecomposedemo
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.airbnb.lottie.compose.*
import kotlin.math.max
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LottieSample()
}
}
}
@Preview
@Composable
fun LottieSample() {
var isPlaying by remember {
mutableStateOf(true)
}
var speed by remember {
mutableStateOf(1f)
}
val lottieComposition by rememberLottieComposition(
//spec = RawRes(R.raw.img_practice),
spec = LottieCompositionSpec.Asset("sound.json")
)
val lottieAnimationState by animateLottieCompositionAsState (
composition = lottieComposition,
iterations = LottieConstants.IterateForever,
isPlaying = isPlaying,
speed = speed,
restartOnPlay = false
)
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(
text = "Lottie Animation In Jetpack Compose",
fontSize = 30.sp
)
LottieAnimation(
lottieComposition,
lottieAnimationState,
modifier = Modifier.size(300.dp)
)
Row(
horizontalArrangement = Arrangement.SpaceAround,
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Button(
onClick = {
speed = max(speed - 0.25f, 0f)
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = "-",
color = Color.White,
fontWeight = FontWeight.Bold,
fontSize = 20.sp,
)
}
Text(
text = "Speed ( $speed ) ",
color = Color.Black,
fontWeight = FontWeight.Bold,
fontSize = 15.sp, modifier = Modifier.padding(horizontal = 10.dp)
)
Button(
onClick = {
speed += 0.25f
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = "+",
color = Color.White,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
}
}
Button(
onClick = {
isPlaying = !isPlaying
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color(0xFF0F9D58)
)
) {
Text(
text = if (isPlaying) "Pause" else "Play",
color = Color.White
)
}
}
}
}
}
