Blog Infos
Author
Published
Topics
,
Published
Implementing Bounce Animation with Animatable

 

 

Purpose

In reference to an earlier blog post, I got questions about how to implement a small feature to bounce the front layer of the BackdropScaffold as an introductory wizard. Here is a short tutorial for it.

 

Approach & Implementation

Let us run down the thinking process.

  • The bouncing is essentially about animating the offset value of the front-layer of the BackdropScaffold. Getting the offset State from BackdropScaffoldState would allow us to manipulate the offset value. In order to write to the state, we need to cast the offset State into MutableState.
  • In order to animate the offset value, we want to use a lower-level animation API called Animatable as the container to drive the value. The suspect function Animatable.animateTo() would require a coroutine environment in order to update its value to change continuously over time. So LaunchEffect is used here.
  • Within coroutine, apply Animatable<>.animateTo() to lift up to a new offset with tween animation spec.
  • Perform drop-down animation in the same coroutine, so it would follow the lift-up animation subsequently.
  • Finally, drive the BackdropScaffoldState.offset State with the Animatable value

Here is the snippet with comments:

val backdropState = rememberBackdropScaffoldState(Revealed)
var offset by (backdropState.offset as MutableState)
// Optional conditions: ex. should-bounce flag, data-loading finished, etc.
if (backdropState.isRevealed) {
// remember the original offset position to go back to
val revealedOffset = remember { backdropState.offset.value }
// value holder Animatable for the actual offset
val offsetAnimatable = remember { Animatable(revealedOffset) }
LaunchedEffect(Unit) {
// lift up by 150 pixels with tween animation spec
offsetAnimatable.animateTo(
targetValue = revealedOffset - 150,
animationSpec = tween(800)
)
// drop down back to original offset with spring animation spec
offsetAnimatable.animateTo(
targetValue = revealedOffset,
animationSpec = spring(
dampingRatio = 0.4f,
stiffness = Spring.StiffnessLow
)
)
}
// drive offset mutableState with Animatable values
offset = offsetAnimatable.value
}
view raw IntroBounce.kt hosted with ❤ by GitHub

Job Offers

Job Offers


    Mobile Engineer

    OLX Group
    Remote, Portugal, Spain, Romania, Poland
    • Full Time
    apply now

    Kotlin Multiplatform Mobile Developer

    Touchlab
    Remote
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Thinking outside the Box: Custom Compose layouts

Jetpack Compose brought a new and simpler way of creating complex custom layouts with unique behaviors. In this talk, you’ll learn how to unlock the full potential of Compose layout system to create pixel perfect…
Watch Video

Thinking outside the Box: Custom Compose layouts

Andrey Kulikov & Andrei Shikov
Android Engineer
Google

Thinking outside the Box: Custom Compose layouts

Andrey Kulikov & A ...
Android Engineer
Google

Thinking outside the Box: Custom Compose layouts

Andrey Kulikov & ...
Android Engineer
Google

Jobs

Final Thought

Animatable comes in handy for many custom animation situations. Hope the tutorial helps.

Regarding what animation API to use, here is a helpful resource.

This article was originally published on proandroiddev.com on October 18, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Compose is part of the Jetpack Library released by Android last spring. Create Android…
READ MORE
blog
The reason for writing this article is that Text composable function does not support…
READ MORE
blog
Screenshot tests are the most effective way how to test your View layer. And…
READ MORE
blog
An Android Splash Screen is the first screen that is visible to the user…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu