XAML 同时并行运行多个动画

a0zr77ik  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(158)

我知道这个问题已经提出,但提供的解决方案(such as this)对我来说还不够。
我想最小化我的应用程序窗口,如下所示:

这些是我的代码(不必要的代码没有张贴):
XAML

<Window x:Name="GanjAsemanMainWindow" x:Class="Ganj_Aseman.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:Ganj_Aseman"
    mc:Ignorable="d"
    Loaded="GanjAsemanMainWindow_Loaded" AllowsTransparency="True" Background="Transparent" FontSize="13" Height="535" ResizeMode="CanResizeWithGrip" Title="MainWindow" Width="764" WindowStyle="None">
<Window.RenderTransform>
    <RotateTransform CenterX="{Binding}" CenterY="{Binding}" Angle="{Binding}"/>
</Window.RenderTransform>
<Window.Resources>
    <Storyboard x:Key="WindowRotation">
        <DoubleAnimation BeginTime="00:00:00" SpeedRatio="0.9" Duration="00:00:2" Storyboard.TargetName="GanjAsemanMainWindow" From="0" To="360" AutoReverse="False" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Image x:Name="MinimizeIconImage" PreviewMouseLeftButtonDown="MinimizeIconImage_PreviewMouseLeftButtonDown" MouseEnter="MinimizeIconImage_MouseEnter" MouseLeave="MinimizeIconImage_MouseLeave" GotFocus="MinimizeIconImage_GotFocus" LostFocus="MinimizeIconImage_LostFocus" Focusable="True" FocusVisualStyle="{x:Null}" Cursor="Hand" Height="47"  VerticalAlignment="Top" Source="{Binding}" Margin="0,2,67,0" HorizontalAlignment="Right" Width="52">
        <Image.Triggers>
            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                <BeginStoryboard>
                    <Storyboard>
                        <ParallelTimeline BeginTime="00:00:00" SpeedRatio="0.9" Storyboard.TargetName="GanjAsemanMainWindow">
                            <DoubleAnimation Duration="00:00:2" From="{Binding Path=ActualHeight,ElementName=GanjAsemanMainWindow}" To="0" AutoReverse="False" Storyboard.TargetProperty="Height"/>
                            <DoubleAnimation Duration="00:00:2" From="{Binding Path=ActualWidth,ElementName=GanjAsemanMainWindow}" To="0" AutoReverse="False" Storyboard.TargetProperty="Width"/>
                            <DoubleAnimation Duration="00:00:2.5" From="100" To="0" AutoReverse="False" Storyboard.TargetProperty="Opacity"/>
                        </ParallelTimeline>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Image.Triggers>
    </Image>
</Grid>

C#

private void MinimizeIconImage_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    RotateTransform RT = new RotateTransform(0, ActualWidth / 2, ActualHeight / 2);
    GanjAsemanMainWindow.RenderTransform = RT;
    (Resources["WindowRotation"] as Storyboard).Begin();
}

但是,DoubleAnimations是顺序执行的,而不是并行执行的,因此,获得以下输出:

我认为,如果我们能将三个属性绑定到一个Storyboard.TargetProperty,它将工作得很好。
我使用以下工具:

  • .NET Framework 4.5
  • WPF

感谢您抽出宝贵时间。
顺祝商祺!
礼萨·贾费里

bwitn5fc

bwitn5fc1#

您也可以制作一个ScaleTransform的动画,而不是制作Window的WidthHeight的动画,类似于您已经拥有的RotateTransform
不过,您必须设定Window的RenderTransformOrigin属性。
下面是一个最简单的例子:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="WindowAnimationTest.MainWindow"
        Background="AliceBlue" Height="535" Width="764"
        AllowsTransparency="True" WindowStyle="None"
        RenderTransformOrigin="0.5,0.5">
    <Window.RenderTransform>
        <TransformGroup>
            <RotateTransform/>
            <ScaleTransform/>
        </TransformGroup>
    </Window.RenderTransform>
    <Window.Resources>
        <Storyboard x:Key="MinimizeAnimations">
            <DoubleAnimation
                Storyboard.TargetProperty="RenderTransform.Children[0].Angle"
                Duration="0:0:2" To="360"/>
            <DoubleAnimation
                Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX"
                Duration="0:0:2" To="0"/>
            <DoubleAnimation
                Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY"
                Duration="0:0:2" To="0"/>
            <DoubleAnimation
                Storyboard.TargetProperty="Opacity"
                Duration="0:0:2.5" To="0"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="MouseLeftButtonDown">
            <BeginStoryboard Storyboard="{StaticResource MinimizeAnimations}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <TextBlock Text="Like this" FontSize="40"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

相关问题