animate*AsState is the simplest animation API in Jetpack Compose. Today, we will learn how to implement it with the help of examples.
Prerequisites:
For this article, create an empty Jetpack Compose project and open MainActivity.kt. Create a MyUI() composable and call it from the onCreate() method. We’ll write our code in it.
MainActivity for Material 3 Jetpack Compose:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}For the Material 2 version:
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
YourProjectNameTheme(darkTheme = false) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
MyUI()
}
}
}
}
}
}
@Composable
fun MyUI() {
}Let’s create a Box().
@Composable
fun MyUI() {
Box(
modifier = Modifier
.size(size = 56.dp)
.background(color = Color.Magenta)
) {
}
}It looks like this:
animate*AsState provides several functions. They are:
- animateFloatAsState
- animateColorAsState
- animateDpAsState
- animateSizeAsState
- animateOffsetAsState
- animateRectAsState
- animateIntAsState
- animateIntOffsetAsState
- animateIntSizeAsState
animateFloatAsState:
It animates a float value. We just need to pass the end (target) value and the API starts the animation from the current value to the end value.
Let us animate the size of the Box using the scale modifier. The animateFloatAsState() function takes four parameters.
@Composable
fun animateFloatAsState(
targetValue: Float,
animationSpec: AnimationSpec<Float> = defaultAnimation,
visibilityThreshold: Float = 0.01f,
finishedListener: ((Float) -> Unit)? = null
): State<Float> {
}targetValue and animationSpec are used most frequently. targetValue is the end value and animationSpec is for customizing the animation.
@Composable
fun MyUI() {
var size by remember {
mutableStateOf(0.5f)
}
val animateScale by animateFloatAsState(targetValue = size)
Box(
modifier = Modifier
.scale(scale = animateScale)
.size(size = 56.dp)
.background(color = Color.Magenta)
.clickable {
size = if (size == 2f) 0.5f else 2f
}
) {
}
}Output:
We have created two variables – size and animateScale. We have passed the size to targetValue parameter and animateScale to the scale parameter. In the clickable block, we are flipping the size value. Whenever the size is changed, targetValue will be changed and animateFloatAsState changes the box size with a nice animation.
If you are not aware of by and remember function, look at the state management article.
Jetpack Compose provides several animationSpec functions that allow us to customize the animation. One of these functions is tween(). Let us use it to change the animation duration.
@Composable
fun MyUI() {
var size by remember {
mutableStateOf(0.5f)
}
val animateScale by animateFloatAsState(
targetValue = size,
animationSpec = tween(durationMillis = 3000)
)
Box(
modifier = Modifier
.scale(scale = animateScale)
.size(size = 56.dp)
.background(color = Color.Magenta)
.clickable {
size = if (size == 2f) 0.5f else 2f
}
) {
}
}Output:
We can follow the same process for other data types.
animateColorAsState:
Use it to animate colors.
@Composable
fun MyUI() {
var color by remember {
mutableStateOf(Color.Red)
}
val animateColor by animateColorAsState(
targetValue = color,
animationSpec = tween(durationMillis = 3000)
)
Box(
modifier = Modifier
.size(size = 56.dp)
.background(color = animateColor)
.clickable {
color = if (color == Color.Red) Color.Yellow else Color.Red
}
) {
}
}Output:
Related: Gradient Progressbar using Jetpack Compose
animateDpAsState:
It animates Dp values.
@Composable
fun MyUI() {
var sizeDp by remember {
mutableStateOf(36.dp)
}
val animateSize by animateDpAsState(
targetValue = sizeDp,
animationSpec = tween(durationMillis = 3000)
)
Box(
modifier = Modifier
.size(size = animateSize)
.background(color = Color.Red)
.clickable {
sizeDp = if (sizeDp == 36.dp) 64.dp else 36.dp
}
) {
}
}Output:
Similarly, we can animate other data types like Size, Offset, Rect, Int, IntOffset, and IntSize.
This is about animate*AsState API in Android Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.
Related Articles: