Xuni Animations Explored

Animation is important in mobile because we want our apps to feel alive. When you interact with your phone what you’ll notice is that there is movement in response to your actions. The response you get is not always necessary to the functionality of the app. Sure, there’s scrolling but maybe the content also bounces or stretches as you reach the edge of a page. Maybe the part beneath your finger lights up or tilts to one side as if you are putting weight on it. If there were no movement how would it feel? It would feel frozen or dead. All of these non-imperative movements we’ll lump together into animation, and we know why animation is important.

In our previous post about animation, Jody wrote a lot about why animation is so greatly valued in mobile apps. A great example of animation in Xuni can be seen in the ripple effect (shown above), found in the Android versions of FlexChart and FlexPie. While we typically think of interactivity when we talk about making our apps more alive, non-interactive animation is another aspect of an app’s life or personality. For example, when a bar chart loads or updates the animation would be considered non-interactive (even if the animation is triggered from a button). In this post we explore the animation implementation in Xuni charts with coded and visual examples.

First-Class Support for Animation

When it came to our mobile UI controls, Xuni, we wanted to make animation a top priority. We wanted animation to be an “out-of-the-box” feature that every developer would instantly get with no extra assembly required. But the animation also needed to be somewhat configurable. Unlike most features, animation can be thought of in many different ways. For instance, stop and think for a moment about how many different ways you could animate the bars of a chart. So we sought to find the perfect balance between having built-in animation that was also easily customizable so users were not stuck with just a single, take-it-or-leave-it implementation.

We sought to find the perfect balance between built-in and easily customizable animation.

We’ve been developing chart controls for 20+ years, but prior to Xuni we’ve never treated animation like a first-class feature. Our strategy began with researching popular examples of chart animations and deciding on a unique approach for each chart type.

Out-of-the-Box, Customizable Animation

To make animation built-in (out-of-the-box) we defined a couple base animations that would be acceptable for most users. Then to make it consistent and easily configurable we implemented a single Animation class that provided a few points of customization: start delay, duration, easing and mode. Start delay and duration are time values that are self-explanatory. Easing represents the easing function that is selected from a collection of industry standards like linear, cubic, sin, bounce, etc. The Mode determines the base animation in which plot elements animate: by point, by series or all at once. By setting these 4 properties a mobile developer can easily create many different looking animations without having to get into difficult customization.

By setting 4 properties you can easily create many different looking animations.

We expose a property of type Animation for each point of animation for each control. For example, a gauge control has 2 points of animation: on load and on update. So for gauges we created two properties: LoadAnimation and UpdateAnimation that are of type Animation. This gives users the ability to customize the load and update animations independently. For charts we also have load and update (update will be made public in V2), and the FlexPie control has a selected animation as well. Here’s what the default loading animation experience looks like for the Xuni FlexChart with a column chart type. Here’s a coded example of how a mobile developer can configure the duration and easing function with just a couple lines of code. This example shows a Spring In easing. Notice in the animation below that the columns have a spring effect before stopping.

flexChart.LoadAnimation.Duration = 1200;  
flexChart.LoadAnimation.Easing = Easing.SpringIn;  

You’ll notice that depending on the chart type, the animation mode can give you a completely different result. Here’s a line chart with AnimationMode set to Point, which means the elements are animated "by point."

flexChart.LoadAnimation.AnimationMode = AnimationMode.Point;  

Here’s the same line chart with AnimationMode set to Series, which means the series are staggered one at a time.

flexChart.LoadAnimation.AnimationMode = AnimationMode.Series;  

You can explore all of the different animation modes for each chart type in the Xuni Explorer app, available as a demo for your smart phone.

What's Next for Animation in Xuni

In the next major release we’ll be flushing out the update animations which are very cool. With update animations you will be able to show trends over time in a four dimensional kind of way (well, 4th dimension being time but in a 2D chart so does that just make it 3D?). As the underlying data values change, FlexChart and FlexPie will detect this change and show an update animation. So stay tuned! You will find the ripple effect and the loading animations in the 2015 v1 release of Xuni.