Jetpack Compose Animations

Walkthrough of the animation APIs in Jetpack Compose and examples of how they are implemented.

Transcript

1. Erik Manberger Jetpack Compose Animations
2. Why use animations? • Add visual cues to notify what’s going on in your app • When UI changes state • Higher quality look and feel
3. Jetpack Compose Animations • High-level animation APIs • Many APIs available as Composable functions • Backed by lower-level APIs built with Kotlin coroutine suspend functions
5. AnimatedVisibility • Animates appearance/disappearance of content • Visible parameter • Customise with EnterTransition/ExitTransition • Fade, Expand/Shrink, Scale, Slide

6. 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) }
7. AnimatedVisibility @Composable fun ToggleGreeting() { var visible by remember { mutableStateOf(false) } Button(onClick = { visible = !visible }) { Text(text = "Greetings") } if (visible) { Text(text = "Hello Android!!") } }
8. AnimatedVisibility @Composable fun ToggleGreeting() { var visible by remember { mutableStateOf(false) } Button(onClick = { visible = !visible }) { Text(text = "Greetings") } AnimatedVisibility (visible) { Text(text = "Hello Android!!") } }
9. AnimatedContent • A container that animates content automatically • targetState • ContentTransform • transistionSpec to customise
10. AnimatedContent @Composable fun <S> AnimatedContent( targetState: S, modifier: Modifier = Modifier, transitionSpec: AnimatedContentScope<S>.() -> ContentTransform contentAlignment: Alignment, content: @Composable() AnimatedVisibilityScope.(targetState: S) -> Unit ) class ContentTransform( val targetContentEnter: EnterTransition, val initialContentExit: ExitTransition, targetContentZIndex: Float = 0f, sizeTransform: SizeTransform? = SizeTransform() )
11. AnimatedContent @Composable fun AnimatedCount() { Column { var count by remember { mutableStateOf(0) } Button(onClick = { count++ }) { Text("Add") } AnimatedContent(targetState = count) { targetCount -> Text(text = "Count: $targetCount") } } }
12. CrossFade • Switch between two layouts • When targetState is changed animation is triggered • FiniteAnimationSpec con fi gures animation
13. CrossFade @Composable fun <T> Crossfade( targetState: T, modifier: Modifier = Modifier, animationSpec: FiniteAnimationSpec<Float> = tween(), label: String = "Crossfade", content: @Composable (T) -> Unit ) { val transition = updateTransition(targetState, label) transition.Crossfade(modifier, animationSpec, content = content) }
14. CrossFade var isGreen by remember { mutableStateOf(false) } Crossfade(targetState = isGreen) { target -> when (target) { true -> Text("CrossFade", color = Color.Green) else -> Text("CrossFade") } }
15. 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
16. fun Modifier.animateContentSize( animationSpec: FiniteAnimationSpec<IntSize> = spring(), finishedListener: ((initialValue: IntSize, targetValue: IntSize) -> Unit)? = null ): Modifier animateContentSize
17. 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) } }
18. 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
19. animateValueAsState @Composable fun <T, V : AnimationVector> animateValueAsState( targetValue: T, typeConverter: TwoWayConverter<T, V>, animationSpec: AnimationSpec<T> = remember { spring() }, visibilityThreshold: T? = null, label: String = "ValueAnimation", finishedListener: ((T) -> Unit)? = null ): State<T>
20. animateValueAsState val size by animateDpAsState( targetValue = if (isExpanded) 160.dp else 80.dp ) Box( modifier = Modifier .size(size) .background(Color.Green) )
21. 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
22. @Composable fun <T> updateTransition( targetState: T, label: String? = null ): Transition<T> { val transition = remember { Transition(targetState, label = label) } transition.animateTo(targetState) DisposableEffect(transition) { onDispose { transition.onTransitionEnd() } } return transition } updateTransition
23. enum class Shape { Rectangle, Circle } updateTransition
24. 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
25. 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
26. @Composable fun rememberInfiniteTransition(): InfiniteTransition { val infiniteTransition = remember { InfiniteTransition() } infiniteTransition.run() return infiniteTransition } rememberInfiniteTransition
27. @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
28. 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
29. Animation • Animation calculation engine that higher-level APIs use • Use to manually control animation time • TargetBasedAnimation, DecayAnimation
30. 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)
31. Easing • Adjust animations fraction • Change animation speed • fun(0-1.0): Float
32. Summary • High-level APIs, easy to use • Start out with AnimatedVisibility and animateContentSize • https://developer.android.com/jetpack/compose/animation
33. Thank you