How to adjust the animation speed of RadToggleSwitchButton

1 Answer 23 Views
Buttons Slider Styling
Tom
Top achievements
Rank 1
Iron
Tom asked on 24 Mar 2022, 04:20 AM

Hi all,

I'm having trouble working out how to increase the thumb slide animation speed. I can't find any information online about the toggle switch animation. Any help is appreciated.

Thanks

<Style TargetType="telerik:RadToggleSwitchButton">
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:SlideAnimation SpeedRatio="2.0"/>
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

1 Answer, 1 is accepted

Sort by
0
Accepted
Vicky
Telerik team
answered on 24 Mar 2022, 01:12 PM

Hi Tom,

Let me start with the fact that you were on the right way!
You just need to use and modify the default AnimationSelector of the RadToggleSwitchButton. With it, and the SpeedRatio from your code snippet, here is how you can achieve it in XAML:

<!--BasedOn is needed for NoXaml binaries only-->
<Style TargetType="telerik:RadToggleSwitchButton" BasedOn="{StaticResource RadToggleSwitchButtonStyle}">
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:AnimationGroup AnimationName="CheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="UncheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="IsThreeStateUncheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="IndeterminateAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

You can either set the SpeedRatio of each animation to the desired value of 2.0, or you can change the default Duration, too.
You can also go for a C# solution, which consists of getting the AnimationSelector of the button when it is loaded and setting the SpeedRatio there (or the Duration) to the desired value:

private void ToggleSwitchLoaded(object sender, RoutedEventArgs e)
{
    AnimationSelector animationSelector = AnimationManager.GetAnimationSelector(sender as RadToggleSwitchButton) as AnimationSelector;
    foreach (RadAnimation animation in animationSelector.Animations)
    {
        animation.SpeedRatio = 2.0;
    }
}

Please, try the above out and let me know if either suggestion is applicable for you.

Best Regards,
Vicky
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tom
Top achievements
Rank 1
Iron
commented on 24 Mar 2022, 11:24 PM

This worked perfectly. Thanks!

Tags
Buttons Slider Styling
Asked by
Tom
Top achievements
Rank 1
Iron
Answers by
Vicky
Telerik team
Share this question
or