$30 off During Our Annual Pro Sale. View Details »

Getting started with animations in Jetpack Compose

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/

Aida Issayeva

March 12, 2022
Tweet

More Decks by Aida Issayeva

Other Decks in Programming

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