WPF 动画：如何让它滑入？

Question

所以我刚开始制作动画，我想做一个“滑出”动画，我成功地做到了。 但现在我希望它通过单击同一个按钮滑入。 所以就像我点击它，它会滑出，然后我希望它在我再次点击它时滑回。

没有任何代码，所以只需通过 xaml

这里是 XAML

<Grid>
    <Grid.Resources>
        <Storyboard x:Key="TransformImage">
            <DoubleAnimation
                Storyboard.TargetName="MovingImage"
                Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)"
                By="130" Duration="0:0:0.3">
            </DoubleAnimation>
        </Storyboard>

        <Storyboard x:Key="TransformButton">
            <DoubleAnimation
                Storyboard.TargetName="btnChange"
                Storyboard.TargetProperty="(Button.RenderTransform).(TranslateTransform.X)"
                By="130" Duration="0:0:0.3">
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>


    <Grid.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btnChange">
            <BeginStoryboard Storyboard="{StaticResource TransformImage}"/>
            <BeginStoryboard Storyboard="{StaticResource TransformButton}"/>
        </EventTrigger>
    </Grid.Triggers>

    <StackPanel Orientation="Horizontal" Margin="0">
        <Image x:Name="MovingImage" Source="logo.png"
               MaxWidth="120">
            <Image.RenderTransform>
                <TranslateTransform />
            </Image.RenderTransform>
        </Image>
    </StackPanel>

    <StackPanel
        Panel.ZIndex="1"
        Height="450" 
          Width="120"
          HorizontalAlignment="Left"
          Background="Black"></StackPanel>

    <Button Margin="130,0,0,0" Height="40" Width="120"
            Content="Show Image" x:Name="btnChange"
            HorizontalAlignment="Left" >
        <Button.RenderTransform>
            <TranslateTransform />
        </Button.RenderTransform>
    </Button>
</Grid>

Answer 1

您需要在单击按钮时存储幻灯片动画的当前状态，并在此基础上运行相应的故事板。

例如，您可以使用具有IsChecked 属性（或视图模型中的属性）的ToggleButton。

为了避免重复的触发器/样式，我将 Image 和 ToggleButton 放在同一个 StackPanel 中。

<Grid>
    <Grid.Resources>

        <system:Double x:Key="SlideOffSet">130</system:Double>

        <Storyboard x:Key="SlideRight">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From="0" To="{StaticResource SlideOffSet}"
                             Duration="0:0:0.3" />
         </Storyboard>

         <Storyboard x:Key="SlideLeft">
             <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                              From="{StaticResource SlideOffSet}" To="0" 
                              Duration="0:0:0.3" />
         </Storyboard>

    </Grid.Resources>

    <StackPanel Orientation="Horizontal" Margin="0">
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, ElementName=SlideState}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideRight}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard Storyboard="{StaticResource SlideLeft}" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>

        <StackPanel.RenderTransform>
            <TranslateTransform />
        </StackPanel.RenderTransform>

        <Image Source="logo.png" MaxWidth="120" />
        <ToggleButton x:Name="SlideState" Margin="10,0,0,0" Height="40" Width="120" Content="Show Image" />

    </StackPanel>

    <StackPanel
        Panel.ZIndex="1"
        Height="450" 
        Width="120"
        HorizontalAlignment="Left"
        Background="Black"></StackPanel>
</Grid>

另外，我不建议使用DoubleAnimation 的By 属性：
如果动画还在运行，你再次点击按钮，那么第二个动画将在错误的位置开始（它将使用第一个动画的 X 值，它没有完成） - 快速多次点击按钮，你会看到问题。

改用From 和To 属性。