SizeTransform


SizeTransform defines how to transform from one size to another when the size of the content changes. When clip is true, the content will be clipped to the animation size. createAnimationSpec specifies the animation spec for the size animation based on the initial and target size.

import androidx.compose.animation.SizeTransform
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.togetherWith
import androidx.compose.ui.unit.IntSize

// enum class CartState { Expanded, Collapsed }
val transitionSpec: AnimatedContentTransitionScope<CartState>.() -> ContentTransform =
    {
        // Fade in with a delay so that it starts after fade out
        fadeIn(animationSpec = tween(150, delayMillis = 150))
            .togetherWith(fadeOut(animationSpec = tween(150)))
            .using(
                SizeTransform { initialSize, targetSize ->
                    // Using different SizeTransform for different state change
                    if (CartState.Collapsed isTransitioningTo CartState.Expanded) {
                        keyframes {
                            durationMillis = 500
                            // Animate to full target width and by 200px in height at 150ms
                            IntSize(targetSize.width, initialSize.height + 200) at 150
                        }
                    } else {
                        keyframes {
                            durationMillis = 500
                            // Animate 1/2 the height without changing the width at 150ms.
                            // The width and rest of the height will be animated in the
                            // timeframe between 150ms and duration (i.e. 500ms)
                            IntSize(
                                initialSize.width,
                                (initialSize.height + targetSize.height) / 2
                            ) at 150
                        }
                    }
                }
            )
    }

Summary

Public functions

FiniteAnimationSpec<IntSize>
createAnimationSpec(initialSize: IntSize, targetSize: IntSize)

This allows FiniteAnimationSpec to be defined based on the initialSize before the size animation and the targetSize of the animation.

Cmn

Public properties

Boolean

Whether the content should be clipped using the animated size.

Cmn

Public functions

createAnimationSpec

fun createAnimationSpec(initialSize: IntSize, targetSize: IntSize): FiniteAnimationSpec<IntSize>

This allows FiniteAnimationSpec to be defined based on the initialSize before the size animation and the targetSize of the animation.

Public properties

clip

val clipBoolean

Whether the content should be clipped using the animated size.