Tweet
Tweet

Slide 1

Slide 1 text

Aida Issayeva Senior Software Engineer Getting started with Animations in Jetpack Compose

Slide 2

Slide 2 text

What is Jetpack Compose?

Slide 3

Slide 3 text

“Jetpack Compose is Android’s modern toolkit for building native UI.” https://developer.android.com/jetpack/compose/why-adopt https://developer.android.com/codelabs/jetpack-compose-animation#0

Slide 4

Slide 4 text

Introduction to Animation API

Slide 5

Slide 5 text

Benefits 1. Highly Customizable 2. Interruptible and Continuous 3. Extensive tooling

Slide 6

Slide 6 text

Low-Level API High-Level API

Slide 7

Slide 7 text

High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade

Slide 8

Slide 8 text

High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val show = remember { mutableStateOf(false) } AnimatedVisibility(visible = show.value){ ProgressNotPerfection() } Button( onClick = { show.value = !show.value } )

Slide 9

Slide 9 text

High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val years = remember { mutableStateOf(2019) } AnimatedContent(targetState = years.value) { targetYear -> ProgressNotPerfection(targetYear) } Button( onClick = { years.value++ }

Slide 10

Slide 10 text

High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val years = remember { mutableStateOf(2019) } Crossfade(targetState = years.value) { targetYear -> ProgressNotPerfection(targetYear) } Button( onClick = { years.value++ }

Slide 11

Slide 11 text

High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val isProgress = remember { mutableStateOf(true) } val text = if(isProgress.value) { "#ProgressNotPerfection" } else { "IWD'22" } Box( modifier = Modifier .animateContentSize() .clickable { isProgress.value = !isProgress. value } ) { ProgressNotPerfection(text)

Slide 12

Slide 12 text

Low-Level API High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade animate*AsState rememberInfiniteTransition updateTransition

Slide 13

Slide 13 text

val isProgress = remember { mutableStateOf(true) } val color by animateColorAsState( targetValue = if (isProgress.value) { Color.Blue } else { Color.Red } ) Box( modifier = Modifier .background(color = color) .clickable { isProgress.value = !isProgress. value } ) Low-Level API animate*AsState rememberInfiniteTransition updateTransition

Slide 14

Slide 14 text

Low-Level API animate*AsState rememberInfiniteTransition updateTransition val infiniteTransition = rememberInfiniteTransition() val alpha = infiniteTransition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = infiniteRepeatable( animation = tween(durationMillis = 1000), repeatMode = RepeatMode.Reverse ) ) Box( modifier = Modifier .alpha(alpha = alpha.value) )

Slide 15

Slide 15 text

Low-Level API animate*AsState rememberInfiniteTransition updateTransition val transition = updateTransition( targetState = isProgress.value) val offsetY = transition.animateDp(label = "offsetY") { targetState -> when (targetState) { true -> 10.dp else -> 60.dp } } . . . Box( modifier = Modifier .offset(y = offsetY.value) .alpha(alpha = alpha.value) .border(width = borderWidth.value) .clickable { isProgress.value = !isProgress. value }

Slide 16

Slide 16 text

Low-Level API High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade animate*AsState rememberInfiniteTransition updateTransition Animatable AnimationState Animation

Slide 17

Slide 17 text

Where to go from here?

Slide 18

Slide 18 text

Official Guide to Jetpack Compose Animation https://android-developers.googleblog.com/2021/05/whats-new-in-jetpack.html

Slide 19

Slide 19 text

Thank you @aida_isay