如何仅在XAML中制作汉堡菜单过渡动画

Question

我只想在XAML中创建汉堡菜单过渡动画。我仅找到了使用隐藏代码执行此操作的教程和示例。但这是我不惜一切代价避免的事情。

这是动画的外观：Animation (no direct GIF possible at the moment)

One example I found

XAML：

<Window.Resources>
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="43.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-43.5"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="70"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CloseMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="43.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0" Value="-43.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
            <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="70"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

隐藏代码：

    private void ButtonMenu_Click(object sender, RoutedEventArgs e)
    {
        if(StateClosed)
        {
            Storyboard sb = this.FindResource("OpenMenu") as Storyboard;
            sb.Begin();
        }
        else
        {
            Storyboard sb = this.FindResource("CloseMenu") as Storyboard;
            sb.Begin();
        }

        StateClosed = !StateClosed;
    }

无论如何，仅使用XAML即可获得相同的结果。我不需要此动画的任何代码...

我知道如何为动画本身创建每个故事板。但是同一按钮必须执行两个不同的Storyboard，根据菜单的状态？

Answer 1

这里是使用ToggleButton的示例。由于ToggleButton内置了Checked / Unchecked事件，因此可以使用EventTrigger中的事件来运行情节提要。

<ToggleButton ... >
    <!-- Your menu icon XAML/rectangles go here -->
    <ToggleButton.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Checked">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource OpenMenu}" />
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
            <EventTrigger.Actions>
                <BeginStoryboard Storyboard="{StaticResource CloseMenu}" />
            </EventTrigger.Actions>
        </EventTrigger>
    </ToggleButton.Triggers>
</ToggleButton>