c# - 滑入滑出动画

Question

我正在尝试使用 C# 和 WPF 制作滑入和滑出动画。

到目前为止，我已经成功编写了下一行代码:

XAML:

<Grid Name="grid" Grid.Column="0" Grid.Row="1">
       <Border Name="border" Background="Red"></Border>
</Grid>

c#:

private void Button_Click(object sender, RoutedEventArgs e) {
            border.Height = grid.ActualHeight;
            if (!isOpen) {
                isOpen = true;
                DoubleAnimation db = new DoubleAnimation();
                db.From = 0;
                db.To = grid.ActualHeight;
                db.Duration = TimeSpan.FromSeconds(0.5);
                border.BeginAnimation(Grid.HeightProperty, db);
            } else {
                isOpen = false;
                DoubleAnimation db = new DoubleAnimation();
                db.From = grid.ActualHeight;
                db.To = 0;
                db.Duration = TimeSpan.FromSeconds(0.5);
                border.BeginAnimation(Grid.HeightProperty, db);
            }
        }

好的是动画被执行了。不好的是这个动画有错误的效果，我的意思是动画从上到中和从下到中(就像它在缩小一样)...

我如何制作(或在我的实际代码中修改)幻灯片效果(从上到下和从下到上)？

它必须在 C# 代码中。

Answer 1

您正在尝试翻译您的 UI 控件，因此请使用 TranslateTransform(如果您在 Canvas 上，则可以使用 Canvas.Top，但是效率低下)。

修改您的 XAML 以包含一个渲染转换集到一个 TranslateTransform 对象:

<Grid Name="grid" Grid.Column="0" Grid.Row="1" ClipToBounds="true">
    <Border Name="border" Background="Red">
       <Border.RenderTransform>
           <TranslateTransform x:Name="borderTransform"/>
       </Border.RenderTransform>
    </Border>
</Grid>

并为转换的 Y 属性设置动画:

DoubleAnimation db = new DoubleAnimation();
db.From = 0;
db.To = grid.ActualHeight;
db.Duration = TimeSpan.FromSeconds(0.5);
borderTransform.BeginAnimation(TranslateTransform.YProperty, db);

正如您所知，使用 Storyboard 对象(此外，您可以在 XAML 中进行设置!)