DEV Community

Cover image for Android — Spring & Fling Animations with Jetpack compose
Raksha for Canopas Software

Posted on

Android — Spring & Fling Animations with Jetpack compose

How to create physics-based animation such as fling and spring animation in jetpack compose?

We will explore Compose animations API to create physics-based cool animations.

What we’re going to implement

  1. Spring release animation
  2. Fling animation
  3. Chain spring animations

But first, let’s get familiar with spring animation. Spring is physics-based animation, unlike other animations, it adds a more natural and smooth effect in motion.

In Jetpack compose, we have spring AnimationSpec to customize animations. SpringSpec takes three parameters.

  1. DampingRatio — define the bouncy of spring. The lower the damping ratio, the higher the bounciness. The default value is DampingRatioNoBouncy

  2. Stiffness — is something like animation duration, it defines the speed of spring to the final position. The default value is Spring.StiffnessMedium

  3. VisibilityThreshold — specifies the visibility threshold.

Check out the project on github for the complete working solution and example.

For full version of this post, visit canopas blog .

Discussion (0)