Spring Animation on Android

Google recently introduced a new set of animations called physics-based animations which further enriches our animation toolbox. As its name suggests, this new family of animations relies on the fundamentals of physics. Instead of having predefined static durations and interpolators, these animations are dynamic. They are driven by force. The animation comes to rest when the force reaches equilibrium. That makes these animations much more natural-looking.

In this post, I’ll share with you some of my experience playing with spring animation, one of the two physic-base animations available at the time of writing. Basically, what you can get from this post include:

• An introduction of how to use spring animation.
• A sample implementation of a chained spring animation shown in the GIF below. This is exactly the example used by Google to illustrate the animation in Android developers doc. Unfortunately the complete sample code was not available, so I made one myself and share it here.

Spring Animation

Each SpringAnimation is driven by a SpringForce which determines the value and velocity on each frame during the animation. SpringForce does that based on the important spring properties: stiffness and damping ratio.

Stiffness and Damping Ratio

Stiffness corresponds to the spring constant. The stiffer the spring is, the harder it is to stretch it, the faster it undergoes dampening. The following GIF can be taken as a reference to get an idea of what stiffness is.

Source: Android Developers’ doc

Spring damping ratio describes how oscillations in a system decay after a disturbance. When damping ratio is over 1 (i.e. over-damped), the object will quickly return to the rest position without overshooting. If damping ratio equals to 1 (i.e. critically damped), the object will return to equilibrium within the shortest amount of time and the it does not bounce at all. When damping ratio is less than 1 (i.e. under-damped), the object tends to overshoot, and return, and overshoot again. The lower the damping ratio is, the more bouncy the object is. Without any damping (i.e. damping ratio = 0), the object will oscillate forever. The following GIF provides some idea about damping ratio.

Source: Android Developers’ doc

Create a spring animation

Spring animation can be used to animate properties of any objects, not just View. Since this post is about animating views, all my code examples will have View as object of animation. Normally, there are 2 options to create a spring animation on a View:

or,

The former creates a SpringAnimation with its View object and the property to be animated (e.g., DynamicAnimation.X, DynamicAnimation.SCALE_X). This constructor does not setup a SpringForce for the animation. Thus, you will then need to manually create a SpringForce before starting the animation.

The later one is used when the final value of the property is known at the time the SpringAnimation is created. A SpringForce object would be generated in this case so manual creation is not necessary. By default, SpringForce has the stiffness value of STIFFNESS_MEDIUM (1500) and damping ratio of DAMPING_RATIO_MEDIUM_BOUNCY (0.5).

It is straight forward to change the stiffness or damping ratio values (be aware that spring may be null if the spring animation is created with the first constructor). Note that you can changes these properties while the animation is running. The change will take effect in the next frame of the animation.

Start a spring animation

There are 2 ways to start a SpringAnimation. Both of them must be called on the main thread.

• start(): request to start the animation. This requires SpringForce.setFinalPosition() to be called before hand to set the rest position of the spring.
• animateToFinalPosition(finalPosition: Float): This method updates the final position of the spring and start (it calls start() internally) the animation if it is not running. This method is particularly useful when the animation is running. In that case, it treats the position change of the spring as a continuous movement since last frame, which yields more accurate results than changing the spring position directly through SpringForce.setFinalPosition(). Note: this is clearer if you have a look at the SpringAnimation’s source code

Example: Chained Spring Animation

I will briefly go through the chained spring animation mentioned in at the beginning of this post. In this example, there are 3 circle views. When the first one is dragged, the other two are animated to their new positions so that they maintain the same distances to the dragged view.

The complete and more proper implementation (also with stiffness and damping ratio bars so that you can try out to see how the animation looks like with different stiffness and damping ratio values) can be found here. The code below is simplified for demonstration purposes.

Assume the three circle views have been declared as dragView, firstView, and secondView, I first create the needed spring animations:

Since I’m animating both the X and Y properties of each circle view, two spring animations are needed for each view. createSpringAnim is a convenient function that creates a spring animation and sets the stiffness and damping ratio I want in this example. Obviously you can set any values to those properties as long as they are valid.

Now that we’ve got the SpringAnimation objects created, the next step is to trigger those animations at appropriate time. Since it is a chained animation, firstView’s animation depends on drag events on dragView and similarly, secondView’s animation is triggered by the progress of firstView’s animation.

The following code enables dragging on dragView and triggers the spring animation on firstView on each drag event. Note that animationToFinalPosition is used to update the rest position of firstView and start its animation when it has not been started.

The last step here is to trigger secondView’s animation based on the progress of firstView’s animation. I need to use addUpdateListener() to keep track of the animation of firstView. animateToFinalPosition is also used to update the final position of secondView.

In this post, I’ve briefly introduced SpringAnimation and gave a demo of how to use it for a chained animation. Obviously this post is not intended to provide a complete overview of the API. It instead attempts to show a specific use case of SpringAnimation. Therefore, I recommend you to visit the Developers’ doc for more details on the animation. I also strongly encourage you to have a look at the SpringAnimation and SpringForce's source code (which are only a few hundred lines of code) for more understanding of the API.

The source code of my implementation of chained spring animation can be found here.