滑入&滑出动画 [英] Slide in & Slide out animation

问题描述

我正在尝试在&用C＃和动画制作动画WPF。

I am trying to make a slide in & out animation with c# & WPF.

到目前为止，我已经设法编写了以下几行：

So far I have managed to code the next lines:

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);
            }
        }

好事是动画被执行了。不好的是，此动画的效果不正确，我的意思是动画从上到下，从下到中（就像它在缩小一样）...

The good thing is that the animation is executed. The bad thing is that this animation has the wrong effect, i mean the animation goes from top to middle and bottom to middle (like if it was shrinking)...

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

How can i make (or modify in my actual code) the slide effect(top to bottom & bottom to top)?

必须在c＃代码中。

推荐答案

尝试翻译您的UI控件，因此请使用 TranslateTransform （ Canvas.Top 您在画布上，但是效率很低。）

You are trying to translate your UI control so use a TranslateTransform (Canvas.Top is possible if you are on a canvas, but inefficient).

修改XAML，以将渲染转换设置为 TranslateTransform 对象：

Modify your XAML to include a render transform set to a TranslateTransform object:

<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 属性进行动画处理：

And animate the Y property of the transform:

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

请注意，这样做是一个整个清洁工，使用 Storyboard 对象（加上您可以在XAML中进行设置！）

Just so you know, doing this is a whole lot cleaner using a Storyboard object (plus you can set it up in XAML!)

这篇关于滑入&滑出动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！