Compose Animation Quiz

UI › Compose UI

You need to animate a single Dp value whenever a boolean state flips. Which API is the most idiomatic choice?

• Animatable<Dp> launched in a LaunchedEffect
• animateDpAsState
• updateTransition with one animateDp child
• rememberInfiniteTransition

Answer: animateDpAsState

animateDpAsState is the declarative one-liner for a single value reacting to state changes; it returns a State<Dp> and animates automatically when the target changes.

What does AnimatedVisibility do by default when no enter/exit parameters are provided?

• Slides content in and out horizontally
• Instantly shows/hides with no animation
• Fades and expands in, fades and shrinks out
• Cross-fades between the previous and next sibling

Answer: Fades and expands in, fades and shrinks out

The default enter is fadeIn + expandIn and the default exit is fadeOut + shrinkOut, so content grows in while fading and shrinks out while fading.

Which API is purpose-built for coordinating several properties that all animate from one target state and stay in sync?

• updateTransition / Transition for synced child animations
• Several separate animate*AsState calls, each driven alone
• Crossfade, which swaps content but doesn’t coordinate props
• animateContentSize, which only animates layout size changes

Answer: updateTransition / Transition for synced child animations

updateTransition creates a Transition that owns multiple child animations driven by the same target state, keeping them synchronized and inspectable in tooling.

While handling a drag gesture, which Animatable call should update the value to follow the finger in real time?

• animateTo with a tween spec
• animateDecay
• snapTo
• updateBounds

Answer: snapTo

snapTo sets the value immediately (and cancels any running animation), which is exactly what you want to track a finger; animateTo/animateDecay are for settling or flinging after release.

Which combination is correct for a continuously pulsing, never-ending animation?

• Use animate*AsState together with a RepeatMode.Reverse spec
• AnimatedContent driven by a looping transitionSpec
• Call Crossfade repeatedly to loop the animation
• rememberInfiniteTransition with an infiniteRepeatable spec

Answer: rememberInfiniteTransition with an infiniteRepeatable spec

rememberInfiniteTransition paired with infiniteRepeatable is the dedicated, efficient way to run an endlessly repeating animation that cleans up when it leaves composition.

A card should smoothly grow/shrink as its text content changes length. What is the simplest correct solution?

• Add the animateContentSize() modifier to the card
• Wrap the text in Crossfade
• Use updateTransition keyed on the text
• Call Animatable.animateTo with the new height each recomposition

Answer: Add the animateContentSize() modifier to the card

animateContentSize() is a modifier that automatically animates a composable between its previous and new measured sizes when the content changes.

Which statement about choosing between high-level and low-level animation APIs is correct?

• Animatable manages its own coroutine, so you never need a CoroutineScope
• animate*AsState requires you to manually start and cancel the animation
• animate*AsState auto-starts from state; Animatable is imperative, run in a coroutine
• Crossfade is lower-level than Animatable because it works with raw frames

Answer: animate*AsState auto-starts from state; Animatable is imperative, run in a coroutine

High-level declarative APIs react to state and animate on their own; Animatable is the imperative low-level primitive you advance yourself via animateTo/snapTo inside a coroutine.

You need to animate between two different UI states where the incoming content has a different size and should scale and slide during the swap, not merely cross-fade. Which API fits best?

• Crossfade for a simple fade between two UI states
• AnimatedVisibility to show or hide content with enter/exit
• animateContentSize to smoothly resize a single composable
• AnimatedContent with transitionSpec and SizeTransform

Answer: AnimatedContent with transitionSpec and SizeTransform

AnimatedContent is the general API for animating between target states with a configurable transitionSpec and an optional SizeTransform; Crossfade can only fade and cannot transform size.

Which statement correctly describes a spring animation spec compared with tween?

• spring uses a fixed default duration of 300ms, exactly like tween
• spring requires you to supply explicit keyframe timestamps yourself
• spring is physics-based with no set duration, tuned by dampingRatio/stiffness
• spring can only animate Float values, never Dp or Color types

Answer: spring is physics-based with no set duration, tuned by dampingRatio/stiffness

spring is physics-based, has no predetermined duration, and is tuned via dampingRatio and stiffness; it can also pick up the current velocity for natural, interruptible motion.

You want a value to pass through specific intermediate values at specific time fractions within one animation, for example 0 at 0ms, 1.2 at 150ms, then 1.0 at 300ms. Which AnimationSpec do you reach for?

• snap
• keyframes
• spring
• infiniteRepeatable

Answer: keyframes

keyframes lets you declare explicit values at specific millisecond timestamps within the total duration, with optional easing between each keyframe.

To animate a background Color whenever a selected state changes, which is the idiomatic declarative helper?

• animateColorAsState, which interpolates Color with the right converter
• animateFloatAsState reading and animating the three channels separately
• animateValueAsState called without any TwoWayConverter supplied
• Crossfade placed over two differently coloured Box composables

Answer: animateColorAsState, which interpolates Color with the right converter

animateColorAsState is the purpose-built declarative API that correctly interpolates between Colors using the right converter; plain Float helpers cannot interpolate a Color, and animateValueAsState needs a converter.

You hold an Animatable and want to call its animateTo when a Button is clicked. What is the correct approach?

• Call animateTo directly in the composable body during recomposition
• Wrap animateTo in LaunchedEffect(Unit) and let it run on compose
• Use snapTo instead, since click handlers cannot trigger animateTo
• Get a rememberCoroutineScope, then launch animateTo in onClick

Answer: Get a rememberCoroutineScope, then launch animateTo in onClick

animateTo is a suspend function, so from an event callback you launch it on a scope obtained via rememberCoroutineScope; you cannot call it directly in composition, and LaunchedEffect is for composition-driven effects rather than click handlers.

For an element that rotates continuously via a Float from an InfiniteTransition, what is the most performant way to apply the rotation each frame?

• Read it in Modifier.graphicsLayer { rotationZ = value }
• Pass it to Image(rotation = value), recomposing each frame
• Use Modifier.rotate(value) and rebuild it in composition
• Keep it in a remembered var updated from LaunchedEffect

Answer: Read it in Modifier.graphicsLayer { rotationZ = value }

Reading the animating state inside the graphicsLayer lambda defers the read to the draw phase, so each frame only re-runs draw and skips recomposition and relayout, which is ideal for high-frequency property animations.

In a LazyColumn whose items are inserted, removed and reordered, which modifier animates each item's placement changes within the list layout?

• Use Modifier.animateContentSize() on each item instead
• Wrap each item in its own AnimatedVisibility container
• Use Modifier.animateItem() inside the items block
• Use Modifier.animateEnterExit() on each item container

Answer: Use Modifier.animateItem() inside the items block

Modifier.animateItem() (the successor to animateItemPlacement) animates appearance, disappearance and position changes of lazy list items; animateContentSize only animates a single composable's own measured size.

Back to Compose Animation