Question

我有画布：

<Canvas x:Name="testCanvas" Height="40" Width="460" VerticalAlignment="Top">
    <Image Source="versus2-top-p1.png"/>
    <Label x:Name="testLabel" Content="TEST" />
</Canvas>

我按照以下方式制作动画：

private void button_Click(object sender, RoutedEventArgs e)
{
    testCanvas.BeginAnimation(Canvas.MarginProperty,
        new ThicknessAnimation(new Thickness(0, -40, 0, 0), TimeSpan.FromSeconds(1))
    );

    testLabel.Content = "ANIMATION TEST";

    testCanvas.BeginAnimation(Canvas.MarginProperty,
        new ThicknessAnimation(new Thickness(0, 0, 0, 0), TimeSpan.FromSeconds(1))
    );
}

问题是动画不链。所有3行代码都在同一时间被解雇。我想按顺序运行这三行代码：

将上边距移至-40
更改testLabel
将上边距移至0

最简单的方法是什么？

Answer 1

使用animation.Completed事件处理程序计算出来......

    private void button_Click(object sender, RoutedEventArgs e)
    {
        ThicknessAnimation animate = new ThicknessAnimation(new Thickness(0, -40, 0, 0), TimeSpan.FromSeconds(1));
        animate.Completed += new EventHandler(animate_Completed);

        testCanvas.BeginAnimation(Canvas.MarginProperty, animate);
    }

    private void animate_Completed(object sender, EventArgs e)
    {
        testLabel.Content = "ANIMATION TEST";

        testCanvas.BeginAnimation(Canvas.MarginProperty,
            new ThicknessAnimation(new Thickness(0, 0, 0, 0), TimeSpan.FromSeconds(1))
        );
    }

Answer 2

作为使用Completed事件开始下一个动画的代码的替代方法，您可以将所有后续动画放在一个故事板中并设置它们的BeginTimes。

关于这一点的好处是你不会得到一组方法，你可以使用故事板控制（开始，暂停，停止，加速）动画。

那就是说，我仍然认为动画作为Xaml资源是一个更好的选择。要将参数传递给动画，您可以使用数据绑定，我认为Xaml动画的可读性/可维护性优于C＃编码动画。

private void button_Click(object sender, RoutedEventArgs e)
{
    var moveTopUpDuration = TimeSpan.FromSeconds(1);
    var storyboard = new Storyboard();

    var moveTopUp = new ThicknessAnimation(
                        new Thickness(0, -40, 0, 0), 
                        moveTopUpDuration);
    Storyboard.SetTarget(moveTopUp, testCanvas);
    Storyboard.SetTargetProperty(moveTopUp, Canvas.MarginProperty);
    moveTopUp.Completed += MoveTopUpCompleted;

    var moveTopDown = new ThicknessAnimation(
                          new Thickness(0, 0, 0, 0),
                          TimeSpan.FromSeconds(1));
    Storyboard.SetTarget(moveTopDown, testCanvas);
    Storyboard.SetTargetProperty(moveTopDown, Canvas.MarginProperty);
    moveTopDown.BeginTime = moveTopUpDuration;

    storyboard.Childeren.Add(moveTopUp);
    storyboard.Childeren.Add(moveTopDown);       

    storyboard.Begin();
}

private void MoveTopUp_Completed(object sender, EventArgs e)
{
    testLabel.Content = "ANIMATION TEST";
}

WPF如何在代码中轻松链接动画？

2 个答案: