Physics-Based Animations in Android with DynamicAnimation: Getting Started

Chaining Springs

You can tie spring animations together to achieve a chain effect, which gives the cool effect of view objects being invisibly connected. In this app, it will ensure the little ducklings stay close to their parent.

Build and run and navigate to the chained spring animation screen. Here, you’ll see a duck with two ducklings.

Try dragging the duck around and you’ll see the ducklings don’t move. For your next step, you’ll chain spring animations together so that both ducklings follow the mother around the pond.

In the project, open ChainedSpringAnimationActivity.kt and get familiar with the code. A lot of it is similar to the spring animation example you just worked through. There are functions to set up both baby ducks with spring animations, and a function to detect drags on the mother duck and move the view accordingly.

In the ACTION_MOVE block in detectDragOnDuck(), add the following:

babyDuck1SpringAnimationX?.animateToFinalPosition(duck.translationX)
babyDuck1SpringAnimationY?.animateToFinalPosition(duck.translationY)

This code ensures that each time the user moves the duck, the first duckling animates to a final position that has the same translation from its initial position.

Build and run. Dragging the duck this time also moves the first duckling, but there’s a duckling left behind.

To chain the animations, you need to add a listener to the first animation when you initialize. That listener triggers the babyDuck2 animations to start when the first value updates.

Add the following listeners to the apply blocks of babyDuck1SpringAnimationX and babyDuck1SpringAnimationY:

For babyDuck1SpringAnimationX:

addUpdateListener { _, value, _ -> babyDuck2SpringAnimationX?.animateToFinalPosition(value) }

For babyDuck1SpringAnimationY:

addUpdateListener { _, value, _ -> babyDuck2SpringAnimationY?.animateToFinalPosition(value) }

These listeners of type OnAnimationUpdateListener have a parameter that’s useful in this case: the current value of the animation. You pass this value through as the finalPosition for the second duckling. Then, each time the first duckling moves, the second duckling will move by the same translation.

Build and run again. This time, both ducklings follow the mother around the pond, staying in a nice chain formation with a bit of a ripple effect.

Where to Go From Here?

Download the final project using the Download Materials button at the top or bottom of this tutorial.

You covered a lot in this tutorial, but there’s still plenty of room to play with your animations. For example, revisit the examples covered above and experiment with different values to see how they look and feel. Then try animating some different view properties, such as alpha, scale or rotation.

The full list of properties you can use to animate views is in the official Android documentation.

If you haven’t already, you can continue learning about property animations by following this tutorial on property animations in Android.

You can also use this tutorial on custom views to learn how to draw your own shapes and animate them in your apps, giving your users a unique experience.

Go forth and add physics-based animations to your apps! If you have any comments or questions, please join the forum discussion below.