滑入和滑出动画

Question

滑入和滑出动画

4

我正在尝试使用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#代码中实现。

- Fernando Santiago

你不能使用XAML处理动画吗？ - E-French

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BradleyDotNET · Accepted Answer

你正在尝试翻译你的UI控件，因此使用TranslateTransform（如果你在画布上，则可以使用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 中设置！），这样做会更加简洁明了。