Animation in .NET MAUI Radial Gauge

17 Jul 202621 minutes to read

Initial animation

The radial gauge allows all of its elements to be animated using the EnableLoadingAnimation property. The default value of this property is false. The duration of the loading animation can be controlled by using the AnimationDuration property of the RadialAxis. The default value of AnimationDuration is 1500 milliseconds.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfRadialGauge control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis EnableLoadingAnimation = "True" Maximum = "150">
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value = "90"
                                     NeedleStartWidth = "0"
                                     NeedleEndWidth = "15"
                                     KnobRadius = "0.09">
                </gauge:NeedlePointer>
            </gauge:RadialAxis.Pointers>
            <gauge:RadialAxis.Ranges>
                <gauge:RadialRange StartValue = "0" EndValue = "50" Fill = "Green"/>
                <gauge:RadialRange StartValue = "50" EndValue = "100" Fill = "Orange"/>
                <gauge:RadialRange StartValue = "100" EndValue = "150" Fill = "Red"/>
            </gauge:RadialAxis.Ranges>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.Maximum = 150;
radialAxis.EnableLoadingAnimation = true;
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 90;
needlePointer.NeedleStartWidth = 0;
needlePointer.NeedleEndWidth = 15;
needlePointer.KnobRadius = 0.09;
radialAxis.Pointers.Add(needlePointer);

RadialRange radialRange = new RadialRange();
radialRange.StartValue = 0;
radialRange.EndValue = 50;
radialRange.Fill = new SolidColorBrush(Colors.Green);
radialAxis.Ranges.Add(radialRange);

radialRange = new RadialRange();
radialRange.StartValue = 50;
radialRange.EndValue = 100;
radialRange.Fill = new SolidColorBrush(Colors.Orange);
radialAxis.Ranges.Add(radialRange);

radialRange = new RadialRange();
radialRange.StartValue = 100;
radialRange.EndValue = 150;
radialRange.Fill = new SolidColorBrush(Colors.Red);
radialAxis.Ranges.Add(radialRange);

this.Content = sfRadialGauge;

Loading Animation in .NET MAUI Radial Gauge

Pointer animation

The EnableAnimation property of pointer allows you to enable or disable the pointer animation. The default value of EnableAnimation is true.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks = "False">
            <gauge:RadialAxis.AxisLineStyle>
                <gauge:RadialLineStyle Thickness = "30"/>
            </gauge:RadialAxis.AxisLineStyle>
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value = "60"
                                     EnableAnimation = "True"
                                     NeedleStartWidth = "0"
                                     NeedleEndWidth = "15"
                                     NeedleFill = "#FFDADADA"
                                     KnobFill = "White"
                                     KnobStroke = "#FFDADADA"
                                     KnobRadius = "0.09"
                                     KnobStrokeThickness = "0.04"
                                     TailFill = "#FFDADADA"
                                     TailLength = "0.15"
                                     TailWidth = "15">
                </gauge:NeedlePointer>
                <gauge:RangePointer Value = "60"
                                    PointerWidth = "30"
                                    EnableAnimation = "True"
                                    Fill = "Orange" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.ShowTicks = false;
radialAxis.AxisLineStyle.Thickness = 30;
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.EnableAnimation = true;
needlePointer.NeedleStartWidth = 0;
needlePointer.NeedleEndWidth = 15;
needlePointer.NeedleFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.KnobFill = new SolidColorBrush(Colors.White);
needlePointer.KnobStroke = Color.FromRgb(218, 218, 218);
needlePointer.KnobRadius = 0.09;
needlePointer.KnobStrokeThickness = 0.04;
needlePointer.TailFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.TailLength = 0.15;
needlePointer.TailWidth = 15;
radialAxis.Pointers.Add(needlePointer);

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 60;
rangePointer.PointerWidth = 30;
rangePointer.EnableAnimation = true;
rangePointer.Fill = new SolidColorBrush(Colors.Orange);
radialAxis.Pointers.Add(rangePointer);

this.Content = sfRadialGauge;

Animation in .NET MAUI Radial Gauge

Animation duration

The pointer’s AnimationDuration property allows you to control the animation duration in milliseconds. The default value of the animation duration is 1000 ms.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks = "False">
            <gauge:RadialAxis.AxisLineStyle>
                <gauge:RadialLineStyle Thickness = "30"/>
            </gauge:RadialAxis.AxisLineStyle>
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value = "60"
                                     EnableAnimation = "True"
                                     AnimationDuration = "3000"
                                     NeedleStartWidth = "0"
                                     NeedleEndWidth = "15"
                                     NeedleFill = "#FFDADADA"
                                     KnobFill = "White"
                                     KnobStroke = "#FFDADADA"
                                     KnobRadius = "0.09"
                                     KnobStrokeThickness = "0.04"
                                     TailFill = "#FFDADADA"
                                     TailLength = "0.15"
                                     TailWidth = "15">
                </gauge:NeedlePointer>
                <gauge:RangePointer Value = "60"
                                    PointerWidth = "30"
                                    EnableAnimation = "True"
                                    AnimationDuration = "3000"
                                    Fill = "Orange" />
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.ShowTicks = false;
radialAxis.AxisLineStyle.Thickness = 30;
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.EnableAnimation = true;
needlePointer.AnimationDuration = 3000;
needlePointer.NeedleStartWidth = 0;
needlePointer.NeedleEndWidth = 15;
needlePointer.NeedleFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.KnobFill = new SolidColorBrush(Colors.White);
needlePointer.KnobStroke = Color.FromRgb(218, 218, 218);
needlePointer.KnobRadius = 0.09;
needlePointer.KnobStrokeThickness = 0.04;
needlePointer.TailFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.TailLength = 0.15;
needlePointer.TailWidth = 15;
radialAxis.Pointers.Add(needlePointer);

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 60;
rangePointer.PointerWidth = 30;
rangePointer.EnableAnimation = true;
rangePointer.AnimationDuration = 3000;
rangePointer.Fill = new SolidColorBrush(Colors.Orange);
radialAxis.Pointers.Add(rangePointer);

this.Content = sfRadialGauge;

Animation Duration in .NET MAUI Radial Gauge

Animation easing

The AnimationEasing property of pointer allows you to apply an easing function to the pointer animation. It uses the built-in Easing enum, which exposes the following values:

Linear, SinIn, SinOut, SinInOut, CubicIn, CubicOut, CubicInOut, BounceIn, BounceOut, SpringIn, and SpringOut.

The default value of AnimationEasing property is Linear.

<gauge:SfRadialGauge>
    <gauge:SfRadialGauge.Axes>
        <gauge:RadialAxis ShowTicks = "False">
            <gauge:RadialAxis.AxisLineStyle>
                <gauge:RadialLineStyle Thickness = "30"/>
            </gauge:RadialAxis.AxisLineStyle>
            <gauge:RadialAxis.Pointers>
                <gauge:NeedlePointer Value = "60"
                                     EnableAnimation = "True"
                                     AnimationDuration = "3000"
                                     AnimationEasing = "{x:Static Easing.SpringOut}"
                                     NeedleStartWidth = "0"
                                     NeedleEndWidth = "15"
                                     NeedleFill = "#FFDADADA"
                                     KnobFill = "White"
                                     KnobStroke = "#FFDADADA"
                                     KnobRadius = "0.09"
                                     KnobStrokeThickness = "0.04"
                                     TailFill = "#FFDADADA"
                                     TailLength = "0.15"
                                     TailWidth = "15">
                </gauge:NeedlePointer>
                <gauge:RangePointer Value = "60"
                                    PointerWidth = "30"
                                    EnableAnimation = "True"
                                    AnimationDuration = "3000"
                                    AnimationEasing = "{x:Static Easing.SpringOut}"
                                    Fill = "Orange">
                </gauge:RangePointer>
            </gauge:RadialAxis.Pointers>
        </gauge:RadialAxis>
    </gauge:SfRadialGauge.Axes>
</gauge:SfRadialGauge>
SfRadialGauge sfRadialGauge = new SfRadialGauge();

RadialAxis radialAxis = new RadialAxis();
radialAxis.ShowTicks = false;
radialAxis.AxisLineStyle.Thickness = 30;
sfRadialGauge.Axes.Add(radialAxis);

NeedlePointer needlePointer = new NeedlePointer();
needlePointer.Value = 60;
needlePointer.EnableAnimation = true;
needlePointer.AnimationDuration = 3000;
needlePointer.AnimationEasing = Easing.SpringOut;
needlePointer.NeedleStartWidth = 0;
needlePointer.NeedleEndWidth = 15;
needlePointer.NeedleFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.KnobFill = new SolidColorBrush(Colors.White);
needlePointer.KnobStroke = Color.FromRgb(218, 218, 218);
needlePointer.KnobRadius = 0.09;
needlePointer.KnobStrokeThickness = 0.04;
needlePointer.TailFill = new SolidColorBrush(Color.FromRgb(218, 218, 218));
needlePointer.TailLength = 0.15;
needlePointer.TailWidth = 15;
radialAxis.Pointers.Add(needlePointer);

RangePointer rangePointer = new RangePointer();
rangePointer.Value = 60;
rangePointer.PointerWidth = 30;
rangePointer.EnableAnimation = true;
rangePointer.AnimationDuration = 3000;
rangePointer.AnimationEasing = Easing.SpringOut;
rangePointer.Fill = new SolidColorBrush(Colors.Orange);
radialAxis.Pointers.Add(rangePointer);

this.Content = sfRadialGauge;