How can I change the animation speed?

Question

This is the code for the animation:

private void Pass_GotFocus(object sender, RoutedEventArgs e)
{
    DoubleAnimation doubleAnimation = new()
    {
        Duration = new(TimeSpan.FromMilliseconds(800)),
        From = 0,
        To = 200
    };

    ColorAnimation colorAnimation = new()
    {
        Duration = new(TimeSpan.FromMilliseconds(800)),
        To = Color.FromRgb(135, 206, 250)               
    };

    Storyboard sb = new() { Duration = new(TimeSpan.FromMilliseconds(800)) };


    Storyboard.SetTarget(doubleAnimation, passwordbox_underline);
    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Rectangle.WidthProperty));

    Storyboard.SetTarget(colorAnimation, passwordbox_underline);
    Storyboard.SetTargetProperty(colorAnimation, new PropertyPath("(0).(1)", Rectangle.FillProperty, SolidColorBrush.ColorProperty));

    sb.Children.Add(doubleAnimation);
    sb.Children.Add(colorAnimation);
    sb.Begin(this);
}

So I have an animated rectangle. It goes from 0 with to 200 width for 1 second with the same speed. My question is how can i make it to start faster at the beginning and gradually slow it down until stop?

Answer 1

You can use an easing function to achieve this kind of behavior.

Easing functions allow you to apply custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring. You could use Key-Frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.

For example, the exponential function (ease out) will slow down the animation towards the end.

DoubleAnimation doubleAnimation = new DoubleAnimation
{
   Duration = TimeSpan.FromMilliseconds(800),
   From = 0,
   To = 200,
   EasingFunction = new ExponentialEase { EasingMode = EasingMode.EaseOut, Exponent = 5}
};