SciChart WPF 2D Charts > Animations API > Introduction to the Animations API
Introduction to the Animations API

In SciChart's WPF Charts, animations can be applied to Chart RenderableSeries. There are four animation types provided out-of-the-box, which can be applied to our WPF charts: FadeAnimationWaveAnimationSweepAnimationScaleAnimation.

All types related to WPF Chart animations are located in the SciChart.Charting.Visuals.RenderableSeries.Animations namespace.

Examples for the WPF Chart Animations can be found in the SciChart WPF Examples Suite which can be downloaded from the SciChart Website or our SciChart.WPF.Examples Github Repository.

Setting an Animation

An animation can be applied to a RenderableSeries by setting the SeriesAnimation property on the RenderableSeries to an instance of the desired animation type:

Declaring an Animation in XAML

Declaring an Animation
Copy Code
<!-- Where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface.RenderableSeries>
    <s:FastBandRenderableSeries>
        <s:FastBandRenderableSeries.SeriesAnimation>
            <s:WaveAnimation />
        </s:FastBandRenderableSeries.SeriesAnimation>
    </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>

 Setting an Animation in Code 

Setting Animation in sCode Behind
Copy Code
using SciChart.Charting.Visuals.RenderableSeries.Animations;

 sciChart.RenderableSeries.Add(new FastBandRenderableSeries { SeriesAnimation = new WaveAnimation() });

Controlling Animations

Series animations start automatically on SciChartSurface.Loaded event. Alternatively they can be controlled manually by calling StartAnimation() and StopAnimation() methods.


It is also possible to set up a delay on an animation via the the AnimationDelay property and change its execution time via the Duration property.

By default, an animation runs for 3 seconds and starts immediately. The EasingFunction property allows to alter standard behavior of the animation by applying a mathematical formula to it. There are several predefined EasingFunctions available in WPF. Please have a look at the Easing Functions Documentation.

Animations Public API

Besides the StartAnimation() and StopAnimation() methods mentioned above, the Animations API also exposes three events, AnimationStartedAnimationEnded and CurrentProgressChanged. The IsRunning property can be used to check whether an animation is currently running on a RenderableSeries.

The Storyboard property allows to declare a Storyboard explicitly which will be used to animate a series.

 

Declaring a Storyboard

Declaring a Storyboard
Copy Code
<s:SciChartSurface.RenderableSeries>
    <s:FastBandRenderableSeries x:Name="bandSeries" Fill="#33279B27"
                                FillY1="#33FF1919"
                                Stroke="#FFFF1919"
                                StrokeY1="#FF279B27">
        <s:FastBandRenderableSeries.SeriesAnimation>
            <animations:WaveAnimation PointDurationFraction="0.2">
                <Storyboard BeginTime="0:0:1" Duration="0:0:1" TargetProperty="CurrentProgress">
                    <DoubleAnimation From="0" To="1"/>
                </Storyboard>
            </animations:WaveAnimation>
        </s:FastBandRenderableSeries.SeriesAnimation>
    </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>
The property which allows animations to work is the SeriesAnimationBase.CurrentProgress property.
See Also