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

单击按钮并基于其运行适当的故事板时，您需要存储幻灯片动画的当前状态。

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

为避免重复的触发器/样式，我将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>

此外，我不建议您使用By的{{1}}属性：
如果动画仍在运行，然后再次单击按钮，则第二个动画将在错误的位置开始（它将使用第一个动画的X值，但尚未完成）-多次快速单击按钮，您将看到问题。

改为使用DoubleAnimation和From属性。

WPF动画：如何使其滑入？

1 个答案: