[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
   [Expand]Getting Started
    [Expand]Gauge Types
    [Expand]Visual Elements
    [Collapse]Appearance Customization
      Color Schemes
      Custom Draw
      Shaping Gauge Elements
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [Expand]Design-Time Features
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


This document explains what the animation is, what types of animation are available in XtraGauges suite and how you can customize animation effects in your application.

Expanded Overview

Animation is the process of changing the gauge element's values of a particular law for a certain time period.

All value indicators in analog gauges (circular and linear) support animation of their values.

For more information on value indicators, refer to the Value Indicators topic.

Expanded Customization

The animation effects for analog gauges provide numerous easing functions such as: BackEase, BounceEase, CircleEase, ElasticEase, SineEase, PowerEase and much more.

To assign a particular easing function to a value indicator, do the following:

  • specify the easing function mode - It provides the interpolation mode for the easing function;
  • select the desired easing function - It specifies a particular law for the animated value.

The following code shows this approach for the circular gauge and BackEase function correspondingly:

To enable animation for the circular (linear) gauge, you need to set the ArcScaleComponent.EnableAnimation (LinearScaleComponent.EnableAnimation) property to true.

The image below demonstrates the animation of value indicator's values using several easing functions:

For more information on how to customize gauge animation, see the How to: Add and Customize Gauge Animation example.

Is this topic helpful?​​​​​​​