WPF中同时在同一个对象上的两个动画答案

【问题标题】：Two Animations on the Same Object Simultaniously in WPFWPF中同时在同一个对象上的两个动画
【发布时间】：2017-03-04 14:45:52
【问题描述】：

我有一个自定义用户控件。它的一部分是一个指示选择的矩形。我想在用户绘制它之后对其进行动画处理。我有以下方法

private AnimationTimeline StartRectangleHeightAnimation(Rectangle rectangle)
{
    return new DoubleAnimation(
        SUB_SELECTION_HEIGHT_RATIO * selectionCanvas.RenderSize.Height, 
        TimeSpan.FromMilliseconds(500));
}

对于矩形的高度和

private AnimationTimeline StartRectangleMarginAnimation(Rectangle rectangle)
{
    Thickness t = new Thickness(rectangle.Margin.Left,
        (selectionCanvas.RenderSize.Height - rectangle.Height) / 2,
        rectangle.Margin.Right, rectangle.Margin.Bottom);

    ThicknessAnimation animation = new ThicknessAnimation(t, TimeSpan.FromMilliseconds(500));
    animation.EasingFunction = new ExponentialEase()
    {
        EasingMode = EasingMode.EaseOut,
        Exponent = -5
    };
    animation.Completed += (s, e) =>
    {
        // DO STUFF.
    };
    return animation;
}

现在，这些动画中的每一个都可以独立工作，我可以做到

var animation = StartRectangleMarginAnimation(rectangle);
rectangle.BeginAnimation(Rectangle.MarginProperty, animation);

或

var animation = StartRectangleHeightAnimation(rectangle);
rectangle.BeginAnimation(Rectangle.HeightProperty, animation);

但不是两者兼而有之。据我了解，一个动画“覆盖”了另一个。所以我们需要一个Storyboard，所以。我现在有

AnimationTimeline shrink = StartRectangleHeightAnimation(rectangle);
AnimationTimeline move = StartRectangleMarginAnimation(rectangle);

Storyboard.SetTarget(shrink, rectangle);
Storyboard.SetTargetProperty(shrink, new PropertyPath(Rectangle.HeightProperty));

Storyboard.SetTarget(move, rectangle);
Storyboard.SetTargetProperty(move, new PropertyPath(Rectangle.MarginProperty));

Storyboard storyboard = new Storyboard();
storyboard.Children.Add(shrink);
storyboard.Children.Add(move);
storyboard.Begin(this);

但这会激活高度，而不是边距。我在这里做错了什么？

【问题讨论】：

您的代码工作正常，确保您的 StartRectangleMarginAnimation 中的厚度有效（没有负值）。请注意，您的缓动函数并不平滑（指数 -5），因此将两个动画减慢到 5 秒（从 0.5 秒），您将看到它如何在接近尾声时发挥作用（因为具有大负指数的指数缓和）

标签： c# wpf animation code-behind

【解决方案1】：

我在我的窗口中创建了一个矩形

<Rectangle x:Name="rectangle" Fill="#FF4A4AE8" HorizontalAlignment="Left" Height="100" Margin="44,69,100,50" Stroke="Black" VerticalAlignment="Top" Width="100"/>

并使用了这个代码：

  private AnimationTimeline StartRectangleMarginAnimation(Rectangle rectangle)
    {           
        Thickness t = new Thickness(rectangle.Margin.Left+20, rectangle.Margin.Top-50, rectangle.Margin.Right, rectangle.Margin.Bottom);

        ThicknessAnimation animation = new ThicknessAnimation(t, TimeSpan.FromMilliseconds(500));
        animation.EasingFunction = new ExponentialEase()
        {
            EasingMode = EasingMode.EaseOut,
            Exponent = -5
        };
        animation.Completed += (s, e) =>
        {
            // DO STUFF.
        };
        return animation;
    }
    private AnimationTimeline StartRectangleHeightAnimation(Rectangle rectangle)
    {
        return new DoubleAnimation(
            20,
            TimeSpan.FromMilliseconds(500));
    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        AnimationTimeline shrink = StartRectangleHeightAnimation(rectangle);
        AnimationTimeline move = StartRectangleMarginAnimation(rectangle);

        Storyboard.SetTarget(shrink, rectangle);
        Storyboard.SetTargetProperty(shrink, new PropertyPath(Rectangle.HeightProperty));

        Storyboard.SetTarget(move, rectangle);
        Storyboard.SetTargetProperty(move, new PropertyPath(Rectangle.MarginProperty));

        Storyboard storyboard = new Storyboard();
        storyboard.Children.Add(shrink);
        storyboard.Children.Add(move);
        storyboard.Begin(this);
    }

一切都正确并同时动画。稍后我将删除此答案。

【讨论】：