In this tutorial, Android Jetpack Compose animation example. Jetpack Compose and learn about the API that allows you to build these animations in a snap.
Jetpack Compose is an innovative and extremely powerful toolkit to create the native Android UI in a declarative way. The code that is written in a declarative manner specifies how the UI should appear based on its current state instead of altering the UI each time the state changes. This is why Jetpack Compose lets you develop applications using a modular approach, by creating less code, and arranging it into smaller and reusable components that are simpler to maintain. What is Jetpack Compose’s approach to Animations?
Android Jetpack Compose animation example.
The declaration-based character of Jetpack Compose allows developers to create beautiful and complex animations in an elegant and easy way. The versatility provided by the Jetpack Compose Animations API provides allows you to use any component’s properties to communicate details to users by using an appropriate motion.
In this course, you’ll discover how Jetpack Compose animations work. how they work behind scenes, the many possibilities for animating your components, and how you can make use of their capabilities to enhance your UI.
As a result, you’ll be taught how to:
- Determine a start and an end condition to guide your changes.
- Your transition should be described by describing the duration and the type of animation.
- Make use of various already-defined builders of transitions, for example, the tween, repeatable, and keyframes.
- Make use of ease functions to add more fluidity or realism to your animated videos.
- Let everything function in a modular and reusable manner.
Animations work to enhance the user experience. Jetpack Compose Animations make this process simple. It’s time to bring your application to the next step!
Jetpack Compose animation Source code.
Step 1: Start your android studio and create a new Project with Jetpack Activity.
Step 2: in Your jetpack class used the below code.
Main_activity.kt Class source code
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SimpleAnimationTheme {
Surface(color = MaterialTheme.colors.background) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(
text = "Jetpack Compose animation",
modifier = Modifier.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
)
}
) {
SimpleAnimation()
}
}
}
}
}
}
@Composable
fun SimpleAnimation() {
val dots = listOf(
remember { Animatable(0f) },
remember { Animatable(0f) },
remember { Animatable(0f) }
)
val waves = listOf(
remember { Animatable(0f) },
remember { Animatable(0f) },
remember { Animatable(0f) },
remember { Animatable(0f) }
)
val animationSpec = infiniteRepeatable<Float>(
animation = tween(4000, easing = FastOutLinearInEasing),
repeatMode = RepeatMode.Restart
)
waves.forEachIndexed { index, animatable ->
LaunchedEffect(animatable) {
delay(index * 1000L)
animatable.animateTo(
targetValue = 1f, animationSpec = animationSpec
)
}
}
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
dots.forEachIndexed { index, animatable ->
LaunchedEffect(animatable) {
delay(index * 100L)
animatable.animateTo(
targetValue = 1f, animationSpec = infiniteRepeatable(
animation = keyframes {
durationMillis = 2000
0.0f at 0 with LinearOutSlowInEasing
1.0f at 200 with LinearOutSlowInEasing
0.0f at 400 with LinearOutSlowInEasing
0.0f at 2000
},
repeatMode = RepeatMode.Restart
)
)
}
}
val wavesDys = waves.map { it.value }
val dys = dots.map { it.value }
val travelDistance = with(LocalDensity.current) { 15.dp.toPx() }
Row(
modifier = Modifier
.align(CenterHorizontally)
) {
dys.forEachIndexed { index, dy ->
Box(
modifier = Modifier
.size(25.dp)
.graphicsLayer {
translationY = -dy * travelDistance
}
) {
Box(modifier = Modifier
.fillMaxSize()
.background(color = Teal200, shape = CircleShape))
}
if (index != dys.size - 1) {
Spacer(modifier = Modifier.width(10.dp))
}
}
}
Spacer(modifier = Modifier.height(100.dp))
Box(
modifier = Modifier
.align(CenterHorizontally)
) {
wavesDys.forEach { dy ->
Box(
modifier = Modifier
.size(50.dp)
.align(Center)
.graphicsLayer {
scaleX = dy * 4 + 1
scaleY = dy * 4 + 1
alpha = 1 - dy
}
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(color = Teal200, shape = CircleShape)
)
}
}
Box(
modifier = Modifier
.size(50.dp)
.align(Center)
.background(color = Teal200, shape = CircleShape)
) {
Icon(
painter = painterResource(id = R.drawable.ic_baseline_mic_24),
contentDescription = "Audio",
tint = Color.Black,
modifier = Modifier
.size(32.dp)
.align(Center)
)
}
}
}
}
Now run your project and test your animation.
Read More Android tutorial