Erik Manberger Jetpack Compose Animations

Why use animations? • Add visual cues to notify what’s going on in your app • When UI changes state • Higher quality look and feel

Jetpack Compose Animations • High-level animation APIs • Many APIs available as Composable functions • Backed by lower-level APIs built with Kotlin coroutine suspend functions

No content

AnimatedVisibility • Animates appearance/disappearance of content • Visible parameter • Customise with EnterTransition/ExitTransition • Fade, Expand/Shrink, Scale, Slide


AnimatedVisibility @Composable fun AnimatedVisibility( visible: Boolean, modifier: Modifier = Modifier, enter: EnterTransition = fadeIn() + expandIn(), exit: ExitTransition = shrinkOut() + fadeOut(), label: String = "AnimatedVisibility", content: @Composable() AnimatedVisibilityScope.() -> Unit ) { val transition = updateTransition(visible, label) AnimatedEnterExitImpl(transition, { it }, modifier, enter, exit, content) }

AnimatedVisibility @Composable fun ToggleGreeting() { var visible by remember { mutableStateOf(false) } Button(onClick = { visible = !visible }) { Text(text = "Greetings") } if (visible) { Text(text = "Hello Android!!") } }

AnimatedVisibility @Composable fun ToggleGreeting() { var visible by remember { mutableStateOf(false) } Button(onClick = { visible = !visible }) { Text(text = "Greetings") } AnimatedVisibility (visible) { Text(text = "Hello Android!!") } }

AnimatedContent • A container that animates content automatically • targetState • ContentTransform • transistionSpec to customise

AnimatedContent @Composable fun AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope.() -> ContentTransform contentAlignment: Alignment, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) class ContentTransform( val targetContentEnter: EnterTransition, val initialContentExit: ExitTransition, targetContentZIndex: Float = 0f, sizeTransform: SizeTransform? = SizeTransform() )

AnimatedContent @Composable fun AnimatedCount() { Column { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Add") } AnimatedContent(targetState = count) { targetCount -> Text(text = "Count: $targetCount") } } }

CrossFade • Switch between two layouts • When targetState is changed animation is triggered • FiniteAnimationSpec con fi gures animation

CrossFade @Composable fun Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec = tween(), label: String = "Crossfade", content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState, label) transition.Crossfade(modifier, animationSpec, content = content) }

CrossFade var isGreen by remember { mutableStateOf(false) } Crossfade(targetState = isGreen) { target -> when (target) { true -> Text("CrossFade", color = Color.Green) else -> Text("CrossFade") } }

animateContentSize • Animates its own size when child modi fi er/Composable changes size • FiniteAnimationSpec can specify animation • A fi nishedListener can notify when size animation is done

fun Modifier.animateContentSize( animationSpec: FiniteAnimationSpec = spring(), finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null ): Modifier animateContentSize

animateContentSize @Composable fun AnimateContentSize() { var showAll by remember { mutableStateOf(false) } val maxLines = if (showAll) Int.MAX_VALUE else 1 Column(modifier = Modifier.animateContentSize()) { Button() Text(maxLines = maxLines) } }

animateValueAsState • Easiest animation API for animating single value • Provide target value animates to that from current value • Customise with AnimationSpec • Float, Color, Dp, Size, O ff set, Rect, Int, IntO ff set and IntSize

animateValueAsState @Composable fun animateValueAsState( targetValue: T, typeConverter: TwoWayConverter, animationSpec: AnimationSpec = remember { spring() }, visibilityThreshold: T? = null, label: String = "ValueAnimation", finishedListener: ((T) -> Unit)? = null ): State

animateValueAsState val size by animateDpAsState( targetValue = if (isExpanded) 160.dp else 80.dp ) Box( modifier = Modifier .size(size) .background(Color.Green) )

updateTransition • Creates and remembers an instance of Transition • Transition manages 1+ animations runs simultaneously between states • Use animateValue for child animations • Use enum type to ensure type safety • Used in AnimatedVisibility, AnimatedContent, CrossFade

@Composable fun updateTransition( targetState: T, label: String? = null ): Transition { val transition = remember { Transition(targetState, label = label) } transition.animateTo(targetState) DisposableEffect(transition) { onDispose { transition.onTransitionEnd() } } return transition } updateTransition

enum class Shape { Rectangle, Circle } updateTransition

var currentShape by remember { mutableStateOf(Shape.Rectangle) } val transition = updateTransition(targetState = currentShape) val cornerRadius by transition.animateDp { targetShape -> when (shape) { Shape.Rectangle -> 0.dp Shape.Circle -> size/2 } } val color by transition.animateColor { targetShape -> when (shape) { Shape.Rectangle -> Color.Green Shape.Circle -> Color.Red } } Box(modifier = Modifier .size(size) .clip(RoundedCornerShape(cornerRadius)) .background(color) ) updateTransition

rememberInfiniteTransition • Creates an instance of In fi niteTransition • Animations start immediately & don’t stop • Set AnimationSpec with in fi niteRepeatable • Child animations: animateColor, animateFloat, …, animateValue

@Composable fun rememberInfiniteTransition(): InfiniteTransition { val infiniteTransition = remember { InfiniteTransition() } infiniteTransition.run() return infiniteTransition } rememberInfiniteTransition

@Composable fun RememberInfiniteTransition() { val infiniteTransition = rememberInfiniteTransition() val degree by infiniteTransition.animateFloat( initialValue = 0f, targetValue = 45f, animationSpec = infiniteRepeatable( animation = tween(500), repeatMode = RepeatMode.Reverse ) ) Canvas(modifier = Modifier.size(160.dp), onDraw = { drawArc( color = Color.Yellow, startAngle = degree, sweepAngle = 360f - 2*degree, useCenter = true ) }) } rememberInfiniteTransition

Animatable • Coroutine-based API for animating a single value • Animates value when changed via animateTo • Ongoing animation will be cancelled when new animation is started • Float, Color • Used in animateValueAsState

Animation • Animation calculation engine that higher-level APIs use • Use to manually control animation time • TargetBasedAnimation, DecayAnimation

AnimationSpec • spring(dampingRatio, sti ff ness) • tween(durationMillis, delayMillis, easing) • keyframes(durationMillis, ranges, easing) • repeatable(iterations, animation, repeatMode) • in fi niteRepeatable(animation, repeatMode) • snap(delayMillis)

Easing • Adjust animations fraction • Change animation speed • fun(0-1.0): Float

Summary • High-level APIs, easy to use • Start out with AnimatedVisibility and animateContentSize • https://developer.android.com/jetpack/compose/animation

Thank you