Animation

• Jul 14, 2021
• 4 minutes to read

All 2D series view types support animation.

• Overview
• Series Animation
• Series Point Animation
• Indicator Animation

Overview

There are two approaches to applying animation effects to the series.

• Turn on automatic animation on data changing or chart loading by setting the ChartControl.AnimationStartMode property to OnDataChanged or OnLoad.

  

• Manually start animation using the ChartControl.Animate method.

  C#

  private void OnFormLoad(object sender, EventArgs e) {
      chart.Animate();
  }
  

  VB.NET

  Private Sub OnFormLoad(sender As Object, e As EventArgs) Handles MyBase.Load
      Chart.Animate()
  End Sub
  

There are two types of animation: series animation and series point animation. The AnimationBase class descendants represent all animations.

The Bar, Bubble, Financial, Funnel, Gantt, Point, Pie and Donut, Polar Point and Radar Point series views support series point animation only.

It is possible to specify animations’ start time using the AnimationBase.BeginTime property, and the duration using AnimationBase.Duration.

An easing function, which specifies the rate of change of animation progress over time, can be set using the AnimationBase.EasingFunction for all animations. For example, the following image shows a chart animated using BounceEasingFunction with EasingFunctionBase.EasingMode set to Out:

Refer to the Easing Functions document for more information on Easing Functions.

Series Animation

These type of animations influence series whose views represent points as united objects, for example, line.

An animation of this type is specified using a series view’s SeriesAnimation property.

The following code demonstrates how to set the Unwind animation to a series with the line view:

C#

Series series = chart.Series["Africa"];
LineSeriesView view = series.View as LineSeriesView;
if (view != null) {
    view.SeriesAnimation = new XYSeriesUnwindAnimation {
        Direction = AnimationDirection.FromBottom
    };
}

VB.NET

Dim series As Series = chart.Series("Africa")
Dim view As LineSeriesView = TryCast(series.View, LineSeriesView)
If view IsNot Nothing Then
    view.SeriesAnimation = New XYSeriesUnwindAnimation() With { _
        Key .Direction = AnimationDirection.FromBottom _
}
End If

The table below lists animations, grouped by the series view, to which these animations can be applied.

Series Views	Supported Animation Types
Areas Lines	XYSeriesSlideAnimation XYSeriesStretchAnimation XYSeriesUnwindAnimation
Polar Area Polar Line Scatter Polar Line Radar Area Radar Line Scatter Radar Line	CircularSeriesCircularUnwindAnimation CircularSeriesLinearUnwindAnimation CircularSeriesSpinZoomInAnimation CircularSeriesUnwindFromCenterAnimation CircularSeriesZoomInAnimation

Series Point Animation

This group’s animations are applied independently to each point. In addition to default animation settings, these animations have properties that allow you to configure point animation order and the delay between point animation start times.

Note that series point animation is specified using properties with different names for different view types. The property specifying the series point animation is SeriesPointAnimation for views supporting series animation, and a series view without series animation has the Animation property that allows you to set point animation.

The following code demonstrates how to set the Widen point animation to a series with the line view:

C#

Series series = chart.Series["Africa"];
LineSeriesView view = series.View as LineSeriesView;
if (view != null) {
    view.SeriesPointAnimation = new XYMarkerWidenAnimation {
        PointDelay = new TimeSpan(0, 0, 0, 0, 25)
    };
}

VB.NET

Dim series As Series = chart.Series("Africa")
Dim view As LineSeriesView = TryCast(series.View, LineSeriesView)
If view IsNot Nothing Then
    view.SeriesPointAnimation = New XYMarkerWidenAnimation() With { _
        Key .PointDelay = New TimeSpan(0, 0, 0, 0, 25) _
    }
End If

The table below represents animations, grouped by series views, to which this animation can be applied.

Series Views	Supported Animation Types
Areas (except Stacked) Lines Point and Bubble	XYMarkerSlideAnimation XYMarkerWidenAnimation
Bars Gantt Series	BarSlideAnimation BarGrowUpAnimation BarWidenAnimation
Financial	FinancialExpandAnimation FinancialSlideAnimation
Funnel	FunnelFlyInAnimation FunnelGrowUpAnimation FunnelSlideAnimation FunnelWidenAnimation
Pies and Donuts	PieBurstAnimation PieDropInAnimation PieFanAnimation PieFanGrowUpAnimation PieFlyInAnimation PieGrowUpAnimation PiePopUpAnimation PieSpinAnimation PieSpinGrowUpAnimation PieWidenAnimation
Polar Series Radar Series	CircularMarkerSlideAnimation CircularMarkerWidenAnimation

Indicator Animation

These types of animations influence series indicators.

The Indicator.Animation property specifies an animation of this type.

The following code demonstrates how to set the Unwind animation to a series with the line view:

C#

Indicator massIndex = new MassIndex {
    Animation = IndicatorUnwindAnimation {
        Direction = AnimationDirection.FromBottom
    }
};
financialView.Indicators.Add(massIndex);

VB.NET

Dim massIndex = new MassIndex() With { _
    Animation = IndicatorUnwindAnimation { _
        .Direction = AnimationDirection.FromBottom _
    } _
};
financialView.Indicators.Add(massIndex);

The list below contains animations available for indicators.

• IndicatorUnwindAnimation
• IndicatorStretchAnimation
• IndicatorSlideAnimation
• IndicatorBlowUpAnimation
• IndicatorUnwrapAnimation