Getting started with animations in Jetpack Compose

PRESENTED AT:
International Women's Day 2022 at GDG Bonny Island

https://gdg.community.dev/events/details/google-gdg-bonny-island-presents-international-womens-day-2022/

DATE:
March 12, 2022

TIME:
7:00 > 20 min

DESCRIPTION:

MORE TALKS & ARTICLES FROM ME: https://cupsofcode.com/talks/

Transcript

1. Aida Issayeva Senior Software Engineer Getting started with Animations in Jetpack Compose
2. What is Jetpack Compose?
3. “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
4. Introduction to Animation API
5. Benefits 1. Highly Customizable 2. Interruptible and Continuous 3. Extensive tooling
6. Low-Level API High-Level API
7. High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade
8. High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val show = remember { mutableStateOf(false) } AnimatedVisibility(visible = show.value){ ProgressNotPerfection() } Button( onClick = { show.value = !show.value } )
9. High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val years = remember { mutableStateOf(2019) } AnimatedContent(targetState = years.value) { targetYear -> ProgressNotPerfection(targetYear) } Button( onClick = { years.value++ }
10. High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade val years = remember { mutableStateOf(2019) } Crossfade(targetState = years.value) { targetYear -> ProgressNotPerfection(targetYear) } Button( onClick = { years.value++ }
11. 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)
12. Low-Level API High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade animate*AsState rememberInfiniteTransition updateTransition
13. 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
14. 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) )
15. 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 }
16. Low-Level API High-Level API AnimatedVisibility AnimatedContent animateContentSize Crossfade animate*AsState rememberInfiniteTransition updateTransition Animatable AnimationState Animation
17. Where to go from here?
18. Official Guide to Jetpack Compose Animation https://android-developers.googleblog.com/2021/05/whats-new-in-jetpack.html
19. Thank you @aida_isay