小编Yur*_*rii的帖子

假设我们有一个动画，当用户将光标移到矩形上方时，该动画将矩形的宽度从50更改为 150，并在用户将光标移开时将其宽度从150更改为 50。让每个动画的持续时间为1 秒。

如果用户将光标移动到矩形上，然后等待 1 秒动画完成，然后将光标移离矩形，则一切正常。两个动画总共需要 2 秒，它们的速度正是我们所期望的。

但是如果用户在第一个动画 (50 -> 150) 完成之前将光标移开，则第二个动画的持续时间将为 1 秒，但速度会非常慢。我的意思是，第二个动画将动画矩形的宽度不是从150 到 50，而是从120 到 50或从70 到 50，如果您非常快速地将光标移开。但是同样的1秒！

所以我想了解的是如何使“向后”动画的持续时间成为动态的。基于第一个动画停止的点的动态。或者，如果我指定From和To值150和50，Duration为1秒，矩形宽度为100 - WPF将由自身计算出动画50％完成。

我正在测试使用动画的不同方法，如触发器、EventTrigger in style 和 VisualStateGroups，但没有成功。

这是一个显示我的问题的 XAML 示例。如果您想自己看看我在说什么，请将光标移到矩形上方，等待 1-2 秒（第一个动画完成）然后将光标移开。之后，将光标移到矩形上方 0.25 秒，然后将其移开。您将看到矩形的宽度变化非常缓慢。

<Rectangle Width="50"
           Height="100"
           HorizontalAlignment="Left"
           Fill="Black">
<Rectangle.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                                 To="150"
                                 Duration="0:0:1" />
            </Storyboard>
        </BeginStoryboard> …