All posts
Android, Blog, UI, UX

Introduction to SpringAnimation with examples

Alexander Krupa

Alexander Krupa

Have you ever wanted to do a bouncy animation like one of these on Android? If you have, you’re in for a treat!

Dynamic-animation is a new module introduced in revision 25.3.0 of the Android Support Library. It provides a small set of classes for making realistic physics-based view animations.

You might say “whatever, I’m just gonna slap a BounceInterpolator or an OvershootInterpolator on my animation and be good”Well, in reality these two often don’t look that great. Of course, you could always write your own interpolator or implement a whole custom animation – but now there’s a much easier way.

Classes

At the time of writing this post, the module contains just 4 classes. Let’s take a look at their docs descriptions:

  • SpringAnimation

    SpringAnimation is an animation that is driven by a SpringForce.

  • SpringForce

    Spring Force defines the characteristics of the spring being used in the animation.

    It has 3 key parameters:

    • finalPosition
      The spring’s rest position (or angle/scale).
    • stiffness
      Docs say:

      Stiffness corresponds to the spring constant. The stiffer the spring is, the harder it is to stretch it, the faster it undergoes dampening.

      The higher the stiffness, the faster the object will settle.

    • dampingRatio
      Docs say:

      Spring damping ratio describes how oscillations in a system decay after a disturbance.

      Depending on the value, our object will:

      1. Oscillate forever around the rest position.
      2. Oscillate around its rest position until it settles.
      3. Stop gently, as soon as possible.
      4. Stop quickly and without overshoot.

    SpringForce has 4 predefined float constants for both stiffness and dampingRatio, but it’s also possible to set custom values.

As you can see the package is currently quite small. If you’re looking for something a bit more complex in terms of spring dynamics, take a look at Facebook’s Rebound library.

Note

DynamicAnimation doesn’t extend Animation, so you won’t be able to just replace one or use it in an AnimationSet. Don’t worry though, the whole thing is still very simple.

Boooring, let’s go already!

Examples

Setup

To get started, add the following dependency to your module’s build.gradle:

The following code is written in Kotlin (give it a try if you haven’t yet!).

Making a SpringAnimation

Well, it won’t really be generic in a programming sense, but let’s start with how every SpringAnimation is made.

  1. Create a SpringAnimation object for your View with a specified ViewProperty
  2. Create a SpringForce object and set your desired parameters (which are described above).
  3. Apply the created SpringForce to your SpringAnimation.
  4. Start the animation.

I moved the creation code into a simple utility function to make the code in these examples a bit more readable:

Example #1 – Position

Let’s say we have an arbitrary view positioned in the center of the screen
We want to achieve the following behavior:

  1. Drag the view.
  2. Move it around.
  3. Release it.
  4. The view springs back to its original position.
SpringAnimation Position GIF

Example #2 – Rotation

There’s a rotating view on our screen which behaves like this:

  1. Grab the view.
  2. Spin it.
  3. Release it.
  4. The view spins back to its original position, again with a bounce.
SpringAnimation Rotation GIF

Example #3 – Scale

As usual, there’s a view on our screen (it could be a photo) which has the following behavior:

  1. Grab it with 2 fingers.
  2. Do a typical pinching gesture to zoom in or out.
  3. Release it.
  4. The view scales back to its original size.
SpringAnimation Scale GIF

Note

The view’s scale value can go below 0 during the animation (i.e. if you scale it up too much before releasing).
If you look closely at the above animation, you’ll see that it flips the Android upside down for a split second. ?

Wrap-up

SpringAnimation makes it quite easy to implement some basic dynamic animations. It’s a nice option, as a little bounciness can help break that linear monotony of a generic Material application. But as with any animations – be careful not to overuse them or you might drive your users crazy!

Newsletter

The post is created by Droids On Roids Team Member.
We would love to take care of your business.

Leave comment

  • Doris Liu

    Great examples!

    BTW, in example #3, you can use setMinValue(float) on the spring animation to prevent the scale from going negative.

    • Alexander Krupa

      Hey, thanks for the comment.
      That’s a good idea! Though I still think it could be limited by the library itself, as I can’t imagine a situation where someone would want a glitchy animation like this.