Skip to main content Skip to footer

Update Animation Deep Dive

With Xuni data visualization controls you can deliver great mobile experiences with built-in animation effects. In a previous post, I explored why animation is important and how we made it available to you in the Xuni data visualization controls. In this post I want to dive a bit deeper, technically, into how you can take advantage of update animation. Update animation occurs when the underlying data collection changes by adding a value, removing a value or modifying a value. So it’s a bit different than say, loading animation because it’s not immediately understood when and how it takes place. How: To support update animation you should use an observable list (ie ObservableCollection) or a XuniCollectionView as the ItemsSource for the control. It’s the only prerequisite. When: To see the update animation you must modify the data collection directly. If you are using an observable list the Xuni control gets notified of the change automatically and can perform the update animation. For demonstration, let’s use C# and an ObservableCollection of some business object as the data source for FlexChart. Check out the documentation to see how you can bind this to the chart and populate a couple series.


objects = new ObservableCollection<MyDataObject>();  
// populate collection here  
this.flexChart.ItemsSource = objects;  

Next we can add a value, remove a value or modify an existing value directly on the collection to see the animation effects.


// add new point to end  
objects.Add(new MyDataObject { ... });  

xuni-update-animation-chart1


// remove last point  
objects.RemoveAt(objects.Count - 1);  

xuni-update-animation-chart2


// modify all values to 35 (Value is a property on MyDataObject bound to FlexChart)  
foreach(MyDataObject o in objects)  
{  
    o.Value = 35;  
}  

xuni-update-animation-chart3You can add, remove or update points anywhere in the collection and FlexChart will animate it appropriately for any chart type. xuni-update-animation-chart4So what about pie charts? Using the same approach above, you can animate trends over time by updating the values for each slice. xuni-update-animation-piechart And what about gauges? Since the gauge is visualizing a single value you can just change the Value property and the gauge will animate. If you are data binding, then make sure to use INotifyPropertyChanged on your view model. It's necessary for the UI controls to be notified of updates to any values. xuni-update-animation-gauges

Customize the Animation

And just like with loading animation you can configure a variety of properties to tweak the animation, such as start delay, duration and easing. These properties are found under the UpdateAnimation property.


// set update animation start delay to 1 second  
chart.UpdateAnimation.StartDelay = 1000;  
// set update animation duration to 2 seconds  
chart.UpdateAnimation.Duration = 2000;  
// set the update animation easing  
chart.UpdateAnimation.Easing = ChartEasing.CubicOut;  

Conclusion

We’ve made animation a first-class feature of Xuni FlexChart, FlexPie and gauges to help you deliver great mobile experiences. By getting animation out of the box, you save time by not having to write any complex animation code. And with the possibility to customize it you can tweak the animation should you need to. You can download the Xuni 2015 v2 release to get all of the update animation features demonstrated in this blog post.

ComponentOne Product Manager Greg Lutz

Greg Lutz

comments powered by Disqus