By default, the AnimatedContent uses delayed fadeIn and scaleIn animations along with SizeTransform to animate size changes of the content.

The code above gets us very close to the desired result:

however, there are a few issues:

• enter/exit transitions don’t follow an “expanding” pattern;
• the fab flies diagonally instead of staying in the same place;
• background color is not changing seamlessly.

Polishing

To fix the first two problems we need to have a shared shape animation between UI components which includes cornerRadius, elevation and padding. And as you might have guessed, to improve the color animation we need to have a shared backgroundColor animation.

Compose has many built-in animation mechanisms to animate primitive values like animateDpAsState , animateFloatAsState , animateColorAsState and many others including generic animateValueAsState where you can animate almost everything by providing your own TwoWayConverter<T, V>.

animate*AsState — fire-and-forget animation function for *. This Composable function is overloaded for different parameter types such as Float, Color, Offset, etc. When the provided targetValue is changed, the animation will run automatically.

To animate cornerRadius change we can use animateDpAsState as follows:

val cornerRadius: Dp by animateDpAsState(
  targetValue = when (containerState) {
    ContainerState.Fab -> 22.dp
    ContainerState.Fullscreen -> 0.dp
  }
)

The same needs to be done for padding, elevation, and backgroundColor, but to synchronize all our animations we need to use the Transition API.

var containerState by remember { mutableStateOf(ContainerState.Fab) }
val transition = updateTransition(targetState = containerState)
val cornerRadius by transition.animateDp { ... }
val backgroundColor by transition.animateColor { ... } 

Transition manages all the child animations on a state level. When the targetState changes, Transition will automatically start or adjust course for all its child animations to animate to the new target values defined for each animation.

Incorporating the API from above, the updated animation code is as follows:

Executing the provided code, we achieve an animation with the container transform style:

Furthermore, each animation can be configured to your liking by providing a transitionSpec. Let’s say you want cornerRadius to speed up quickly and slow down gradually:

val cornerRadius by transition.animateDp(
  transitionSpec = {
    tween(
      durationMillis = 500,
      easing = FastOutSlowInEasing,
    )
  }
) { ... }

More details about different Easing options (with nice GIFs!) can be found here and how to customize animations in general here.

Conclusion

The shared container technique with animated properties allows us to achieve pretty elegant animations, and the customization of individual child animations ​​lets you realize even the strangest whims of your designers. One of the downsides of this approach is that it doesn’t work with navigation frameworks, because you have to have a single shared parent for both composables.

The complete example shown here is available in the repository below:

https://github.com/rmyhal/container-transform-compose/?source=post_page—–98e5e74a15c9——————————–