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

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

,

Meet Jewel:Create IDE plugins in Compose

Jetpack Compose is the declarative UI toolkit for Android that makes it easy to create beautiful, responsive apps. However, until recently, there was no easy way to use Compose to create IDE plugins without too…
Watch Video

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & Chris Sinco
UX Engineer & UX Design Lead
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi & ...
UX Engineer & UX Des ...
Google

Meet Jewel:Create IDE plugins in Compose

Sebastiano Poggi ...
UX Engineer & UX Design L ...
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 a relatively young technology for writing declarative UI. Many developers don’t even…
READ MORE
blog
When it comes to the contentDescription-attribute, I’ve noticed a couple of things Android devs…
READ MORE
blog
In this article we’ll go through how to own a legacy code that is…
READ MORE
blog
Compose is part of the Jetpack Library released by Android last spring. Create Android…
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