SizeTransform

public interface 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.

Functions

public 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.

Code Examples

AnimatedContentTransitionSpecSample

@Suppress("UNUSED_VARIABLE")
fun AnimatedContentTransitionSpecSample() {
    // 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
                        }
                    }
                }
            )
    }
}