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。

为了避免重复 triggers/styles 我将 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 属性：
如果动画仍然是运行ning 并且您再次单击按钮，那么第二个动画将在错误的位置开始（它将使用第一个动画的 X 值，尚未完成） - 快速单击按钮多次，您将看到问题。

改用 From 和 To 属性。

WPF 动画：如何让它滑入？

WPF Animation : How do i make it slide in?

c#

wpf

animation

xaml

storyboard