使用 WPF C# 同时对两个 UIE 进行动画处理

本文关键字：UIE 两个 处理 动画 WPF 使用 | 更新日期: 2023-09-27 18:30:25

我这里有这两个动画，一个用于关闭滑出网格导航菜单，另一个用于在该菜单关闭时将矩形填充设置为透明。

我希望这些同时发生。现在，动画按调用顺序发生。

如何使用 C# 代码尽可能简单和干净地实现这一点？我创建此应用程序只是为了了解动画和布局控件的不同方式。

private void _CloseSlideGrid()
{
    DoubleAnimation da = new DoubleAnimation();
    da.Duration = TimeSpan.FromSeconds(0.3d);
    da.DecelerationRatio = 1.0d;
    da.From = 500.0d;
    da.To = 0.0d;
    _slideGrid.BeginAnimation(Grid.WidthProperty, da);
}
private void _DisableTransparentCover()
{
    BrushAnimation ba = new BrushAnimation();
    ba.Duration = TimeSpan.FromSeconds(0.3d);
    ba.DecelerationRatio = 1.0d;
    ba.From = _GetBrush("#77000000");
    ba.To = _GetBrush("#00000000");
    _tranparentCover.BeginAnimation(Rectangle.FillProperty, ba);
}

关闭按钮的事件回调调用了将处理动画的两个私有函数。

private void _NavCloseButton_Click(object sender, RoutedEventArgs e)
{
    _CloseSlideGrid();
    _DisableTransparentCover();
}
这里有

一个指向Imgur相册的链接，其中包含我的窗口两种状态的屏幕截图，如果您有兴趣的话：https://i.stack.imgur.com/UEubH.jpg

如果我能提供更多信息，请告诉我，

谢谢。

使用 WPF C# 同时对两个 UIE 进行动画处理

只需将它们添加到同一个故事板上，应该没问题。我不确定您的画笔动画是什么，但是将颜色动画与属性路径一起使用，如下所示就可以了。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Storyboard x:Key="CloseAnimation">
            <DoubleAnimation From="500.0" To="0.0" DecelerationRatio="1.0" Duration="00:00:03"
                             Storyboard.TargetName="MyTextBox" Storyboard.TargetProperty="Width"/>
            <ColorAnimation From="#77000000" To="#00000000" DecelerationRatio="1.0" Duration="00:00:03"
                            Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"/>
        </Storyboard>
    </Window.Resources>
    <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="MyTextBox" Grid.Column="0" Width="500"/>
            <Grid x:Name="MyGrid" Grid.Column="1" Background="#77000000" Width="100"/>
        </Grid>
        <Button Content="Animate">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click" >
                    <BeginStoryboard  Storyboard="{StaticResource CloseAnimation}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>
</Window>

如果您真的想在代码隐藏中执行此操作并且没有其他解决方法，则可以这样翻译。

private void _CloseSlideGrid(Storyboard sb)
{
    DoubleAnimation da = new DoubleAnimation();
    da.Duration = TimeSpan.FromSeconds(0.3d);
    da.DecelerationRatio = 1.0d;
    da.From = 500.0d;
    da.To = 0.0d;
    Storyboard.SetTarget(da, MyTextBox);
    Storyboard.SetTargetProperty(da, new PropertyPath("Width"));
    sb.Children.Add(da);
}
private void _DisableTransparentCover(Storyboard sb)
{
    ColorAnimation ba = new ColorAnimation();
    ba.Duration = TimeSpan.FromSeconds(0.3d);
    ba.DecelerationRatio = 1.0d;
    ba.From = (Color)ColorConverter.ConvertFromString("#77000000");
    ba.To = (Color)ColorConverter.ConvertFromString("#00000000");
    Storyboard.SetTarget(ba, MyGrid);
    Storyboard.SetTargetProperty(ba, new PropertyPath("(Background).(SolidColorBrush.Color)"));
    sb.Children.Add(ba);
}
private void _NavCloseButton_Click(object sender, RoutedEventArgs e)
{
    var sb = new Storyboard();
    _CloseSlideGrid(sb);
    _DisableTransparentCover(sb);
    sb.Begin();
}
相关文章：