Android Jetpack Compose animation example
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
