Animating custom views

In the previous post I’ve described a way to create custom drawing view in Android. Now let’s see how to add animations into such views. Example of what we want to achieve is on the video:

My implementation is based on this interest article by Anders Ericsson. He suggests to create Dynamic wrapper of [static] data class which adds time dependancy to our initial [static] data. After this we need to modify applyData() method of the view where we need to iteratively call Runnable on the Dynamic data at different time moments. Let’s see how it may be implemented:

Let’s create new class for dynamic staff. The key method will be:

Here Anders Ericsson propose to use not only velocity of the moving point, but also acceleration. This is done to emulate some kind of ‘spring’ behaviour.

We need to call this method every time we want to update data and pass new timestamp value. Also we need a method to define is a movement finished or not?

The drawing view itself doesn’t change significantly – we just need to run Runnable after applying new data:

and change onDraw method to make it take current dynamic data state  dynamicGraphData.getPosition() instead of staticData.getValue. After this simple changes we obtain nice animation during  applying new data to the graph.

You can find a example project on my github.

Leave a Reply