Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Collapsing toolbar with parallax effect and cur...

Collapsing toolbar with parallax effect and curved motion in Jetpack Compose

Animations are super important when building an application. They highlight relations between elements, bring attention to what is important and they also can express a brand style.

In this talk, I’ll show you how to implement a collapsing toolbar with parallax effect in jetpack compose only (no third party library). I’ll also show you how to implement curved motion using the power of quadratic Bézier curve which is already ubiquitous in game development but now become so accessible in Jetpack Compose.

So if you want to learn how to build any custom linear animations, or animate objects along a curved path in Compose without impacting performance, join in 😎

Morad Azzouzi

April 27, 2023
Tweet

Other Decks in Programming

Transcript

  1. Collapsing toolbar with parallax effect and curved motion in Jetpack

    Compose Morad Azzouzi Senior Android Developer @MoradiousBig
  2. Agenda 1. What are we building ? 2. Foundation 3.

    Animation 4. Linear interpolation 5. Performance
  3. What are we building ? Collapsing toolbar animation 1. The

    header is translating on the Y axis using a parallax effect 2. The header fades out as the list is scrolling up 3. The toolbar fades in once the list reaches 56dp from the top screen 4. The title translates on X and Y axis using a quadratic Bézier curve 5. The title scales down as the list is scrolling up
  4. Animation Header parallax effect GraphicsLayer: modifier which defines the effects

    to apply for the content, such as translation, scaling, opacity and even more.
  5. Animation Header fade out animation Collapsed: alpha value equals “0”

    when scroll offset reaches the top of the screen: B (headerHeight ; 0) Expanded: alpha value equals “1” when no scrolling applies: A (0 ; 1)
  6. Animation Header fade out animation ✐ ✐ A (0 ;

    1) and B (headerHeight ; 0) ; 1)
  7. Linear interpolation “t” value “t” value is the percentage of

    the animation between 0 and 1. The idea is to represent the ratio of this animation:
  8. Linear interpolation Title XY coordinates x y x = 16

    dp y = headerHeight - titleHeight - padding x y P1 x = 72 dp y = toolbarHeight / 2 - titleHeight / 2 P0
  9. Linear Interpolation “lerp” P0 : (16.dp, heiderHeight - titleHeight -

    padding) P1 : (72.dp, toolbarHeight / 2 - titleHeight/ 2) t : scrollOffset / (headerHeight - toolbarHeight)
  10. Performance The three phases of compose 💡 You should not

    have to recompose just to relayout a screen “What to show” “Where to place it” “How to draw it”