thumbnail

Back to Blog

ShinobiCharts for Android – Spruce up your charts with animations

Posted on 24 Sep 2014 Written by Kai Armer

Here at Shinobi data is everything, so our ultimate goal has always been to give you the tools to make your data shine. The latest release of ShinobiCharts for Android builds on this theme by introducing animations. In this blog post I’ll explore how to use animations in your charts, and how to take things a little further.

What are animations? In the context of ShinobiCharts, animations typically occur when a series on the chart is shown, hidden, added or removed. Without animations, a series shown on the chart will simply appear once the next draw cycle has completed. With animations on the other hand the series can appear to ‘grow’ or ‘fade in’ to the chart, as you’ll see in the following gif (obviously it’ll be a lot smoother and sharper in a real app!).

Entry Animation Looping

To demonstrate animations I’m going to start with the Legend sample application which comes bundled with ShinobiCharts for Android. With this application I will show how different animation types are added from scratch, to several series. You may also find it useful to take a look at the SeriesHidingAnimation sample project which is also included in the ShinobiCharts for Android bundle. If you get stuck, you can browse the source code on github, or download a zip.

If you haven’t yet got your hands on Shinobi, head on over and download a trial.

Let’s Animate!

To animate a series at its most simple level all that is required is one line of code:

smartphoneSales.enableAnimation(true);

Go ahead and enable animations in this way for one or more series on your chart. When you run the chart you’ll see the bars now ‘grow’ from left to right as they appear. Cool!

Growing from left to right is all well and good, it works well for Bar series. But what about other series types? I’m not convinced a Pie or Donut series would particularly suit a left to right growing animation!

ShinobiCharts for Android offers several built-in animation types. These can be obtained by calling the appropriate create method within the SeriesAnimation class. For example when showing (or adding) a series on a chart you can use the following animations:

  • Television – resembles the effect of an old CRT TV being switched on – great for Line and Band series
  • Fade – smoothly allows the series to fade in
  • GrowHorizontal – the series grows from left to right – ideal for Bar series
  • GrowVertical – the series grows from bottom to top – works well with Column, OHLC and Candlestick series
  • Grow – the series grows from its center outward – this is typically used for Pie or Donut series

To animate a series as it is shown, with one of these animation types we simply need one line of code:

smartphoneSales.setEntryAnimation(SeriesAnimation.createFadeAnimation());

This will override the default animation type of the series, and apply the type which is passed to the method. In this case the series will slowly fade in, becoming less transparent as it does so.

What goes up must come down

So far we’ve really brightened up the look of series being shown, but what about when we hide them? To animate a series as it is removed or hidden from the chart we again need only write one line of code:

smartphoneSales.setExitAnimation(SeriesAnimation.createFadeAnimation());

An exit animation simply performs the animation in reverse.  So in this case, the series will slowly fade out and disappear.

Not so fast!

As we’ve seen, ShinobiCharts for Android offers a good range of animation types that will suit the needs of many. The more creative of you however, may wish to tweak things further. An adjustment people often wish to make to an animation is the time it takes to complete. For example, if we wish to slow down the fade in of our smart phone sales series, we only need add a few lines of code:

First, we get a reference to a new animation:

SeriesAnimation entryAnimation = SeriesAnimation.createFadeAnimation();

Next we need to set the time period which we wish the animation to take to complete (in seconds):

entryAnimation.setDuration(7.0f);

Finally, we replace our initial line of code which applies the animation to the series, with a new one:

smartphoneSales.setEntryAnimation(entryAnimation);

When we run this code we will see that the series for smart phone sales slowly fades in over a 7 second period. You can of course change this value to anything you like – have fun experimenting!

There are quite a few behavioural changes you can make to an animation object, too many to cover in this post. Head on over to the API docs to learn more. I should point out though that you should always remember to use a different animation object for your entry and exit animation of a series. It may be tempting to use the same for both, but this is not recommended. Setting animations in this way can cause undesired effects if a given series is shown and then quickly hidden (or vice-versa).

Let’s roll our own

Keen to please the more creative of you out there, ShinobiCharts for Android also offers scope to create your own custom animations. Let’s try a simple example, again working with our trusty smart phone sales series:

First we instantiate our SeriesAnimation object:

SeriesAnimation entryAnimation = new SeriesAnimation();

Next we create our own AnimationCurve which will define how our SeriesAnimation behaves over the duration of the animation. It’s simply a case of implementing the valueAtTime(float) method. The ‘time’ value given is a value between 0.0 and 1.0 and is a proportion of the animation’s duration corresponding to where it is up to at that point.

The value you return is the progress of the animated quantity between its beginning and end positions where 0.0 is the start and 1.0 is the end. As such it is possible to return values that are less than 0.0 or greater than 1.0. In this exmaple we are return the square of the time value.

We apply our custom animation curve to the X-value scale of the animation. Furthermore, we want it to start from the middle of the plot area so we set the X origin to 0.5.

entryAnimation.setXOrigin(0.5f);
AnimationCurve entryCurve = new AnimationCurve() {
    @Override public float valueAtTime(float time) {
        return (float) Math.pow(time, 2); 
    }
}; 
entryAnimation.setXScaleCurve(entryCurve);

Finally we add this to our series as before:

smartphoneSales.setEntryAnimation(entryAnimation);

The effect of this custom animation (for an entry) is that the bar will grow slowly, from its center at a fairly slow speed. As the animation progresses the speed at which the series grows will increase. You can of course use a number of built in animation curves such as our BounceAnimationCurve. If you replace this line of code:

entryAnimation.setXScaleCurve(entryCurve); 

With this:

entryAnimation.setXScaleCurve(new BounceAnimationCurve());

You will see our bar series now bounces into position, but still takes 7 seconds to do it!

It’s a wrap

In this blog post I’ve briefly covered the basics of how to enhance ShinobiCharts for Android with animations. I’ve shown you how to leverage some of the built in animations functionality that Shinobi offers and I have also touched upon how to take things a little further. You can browse the source code on github, or download a zip.

We hope you have as much fun using animations as we did creating them! Download the free trial here and have a go yourself!

Back to Blog