如何更改动画速度？

Question

这是动画代码：

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);
}

所以我有一个动画矩形。它以相同的速度从 0 到 200 宽度持续 1 秒。我的问题是如何让它在开始时启动得更快，然后逐渐减慢直到停止？

Answer 1

您可以使用 easing function 来实现这种行为。

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.

例如，指数函数（缓出）将减慢动画的速度。

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

如何更改动画速度？

How can I change the animation speed?

c#

wpf

wpf-animation