How to: Implement a Custom Bar Animation

• Nov 13, 2018
• 3 minutes to read

To implement a custom bar animation, design a class inheriting the BarAnimationBase class and override the BarAnimationBase.ApplyState method which determines the transformations applied to an individual bar.

MainForm.cs

protected override void OnLoad(EventArgs e) {
    base.OnLoad(e);

    chartControl.AnimationStartMode = ChartAnimationMode.OnLoad;
    view.Animation = new ZoomInFromCenterBarAnimation {
        BeginTime = new TimeSpan(0, 0, 0),
        Duration = new TimeSpan(0, 0, 2),
        PointDelay = new TimeSpan(0, 0, 0, 0, 250),
        PointOrder = PointAnimationOrder.Random,
        EasingFunction = new SineEasingFunction {
            EasingMode = EasingMode.Out
        }
    };
}

private void OnAnimateClick(object sender, EventArgs e) {
    chartControl.Animate();
}

ZoomInFromCenterBarAnimation.cs

using DevExpress.XtraCharts;
using System.Drawing;

namespace CustomBarAnimationExample {
    class ZoomInFromCenterBarAnimation : BarAnimationBase {
        public override void ApplyState(
                SceneModifier modifier, 
                RectangleF diagramBounds, 
                BarSeriesPointLayoutParameters barParameters,
                float progress) {
            float startPositionX = diagramBounds.Left + diagramBounds.Width / 2;
            float startPositionY = diagramBounds.Top + diagramBounds.Height / 2;

            RectangleF barBounds = barParameters.Bounds;
            float endPositionX = barBounds.Left + barBounds.Width / 2;
            float endPositionY = barBounds.Top + barBounds.Height / 2;

            // Moves bar from the diagram center to its position on the diagram.
            modifier.Translate(
                    (startPositionX - endPositionX) * (1 - progress), 
                    (startPositionY - endPositionY) * (1 - progress)
            );

            // Scales bar.
            // Note that methods requiered for correct transform are called in inverse order.
            // This is a feature of affine transformations.
            modifier.Translate(endPositionX, endPositionY);
            modifier.Scale(progress, progress);
            modifier.Translate(-endPositionX, -endPositionY);
        }

        protected override ChartElement CreateObjectForClone() {
            return new ZoomInFromCenterBarAnimation();
        }
    }
}

ZoomInFromCenterBarAnimation.vb

Imports DevExpress.XtraCharts
Imports System.Drawing

Namespace CustomBarAnimationExample
    Friend Class ZoomInFromCenterBarAnimation
        Inherits BarAnimationBase

        Public Overrides Sub ApplyState(ByVal modifier As SceneModifier, ByVal diagramBounds As RectangleF, ByVal barParameters As BarSeriesPointLayoutParameters, ByVal progress As Single)
            Dim startPositionX As Single = diagramBounds.Left + diagramBounds.Width / 2
            Dim startPositionY As Single = diagramBounds.Top + diagramBounds.Height / 2

            Dim barBounds As RectangleF = barParameters.Bounds
            Dim endPositionX As Single = barBounds.Left + barBounds.Width / 2
            Dim endPositionY As Single = barBounds.Top + barBounds.Height / 2

            ' Moves bar from the diagram center to its position on the diagram.
            modifier.Translate((startPositionX - endPositionX) * (1 - progress), (startPositionY - endPositionY) * (1 - progress))

            ' Scales bar.
            ' Note that methods requiered for correct transform are called in inverse order.
            ' This is a feature of affine transformations.
            modifier.Translate(endPositionX, endPositionY)
            modifier.Scale(progress, progress)
            modifier.Translate(-endPositionX, -endPositionY)
        End Sub

        Protected Overrides Function CreateObjectForClone() As ChartElement
            Return New ZoomInFromCenterBarAnimation()
        End Function
    End Class
End Namespace

MainForm.vb

Protected Overrides Sub OnLoad(ByVal e As EventArgs)
    MyBase.OnLoad(e)

    chartControl.AnimationStartMode = ChartAnimationMode.OnLoad
    view.Animation = New ZoomInFromCenterBarAnimation With { _
        .BeginTime = New TimeSpan(0, 0, 0), .Duration = New TimeSpan(0, 0, 2), .PointDelay = New TimeSpan(0, 0, 0, 0, 250), .PointOrder = PointAnimationOrder.Random, .EasingFunction = New SineEasingFunction With {.EasingMode = EasingMode.Out} _
    }
End Sub

Private Sub OnAnimateClick(ByVal sender As Object, ByVal e As EventArgs) Handles btnAnimate.Click
    chartControl.Animate()
End Sub