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: FadeAnimation, WaveAnimation, SweepAnimation, ScaleAnimation.
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, AnimationStarted, AnimationEnded 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> |