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
   

   View Slide

2. What is Jetpack
   Compose?
   

   View Slide

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
   

   View Slide

4. Introduction to
   Animation API
   

   View Slide

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

   View Slide

6. Low-Level API
   High-Level API
   

   View Slide

7. High-Level
   API
   AnimatedVisibility
   AnimatedContent
   animateContentSize
   Crossfade
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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
    

    View Slide

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)
    )
    

    View Slide

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 }
    

    View Slide

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

    View Slide

17. Where to go from
    here?
    

    View Slide

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

    View Slide

19. Thank you
    @aida_isay
    

    View Slide