Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Collapse]Gauges
   [Expand]Getting Started
   [Collapse]Concepts
    [Expand]Gauge Types
    [Expand]Visual Elements
    [Collapse]Appearance Customization
      Color Schemes
      Custom Draw
      Shaping Gauge Elements
      Animation
     Coordinate System
     Data Binding
     Saving and Restoring Gauge Layout and Style Settings
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]Product Information
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Animation

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.

How would you rate this topic?​​​​​​​