时间戳

首页 > 解决方案 > WPF 动画：我如何让它滑入？

c# - WPF 动画：我如何让它滑入？

问题描述

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

没有任何代码，所以只需通过 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>

标签： c#wpfxamlanimationstoryboard

解决方案

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

例如，您可以使用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以下属性DoubleAnimation：
如果动画仍在运行并且您再次单击按钮，则第二个动画将在错误的位置开始（它将使用第一个动画的 X 值，未完成） - 快速单击按钮很多次，你会看到问题。

改为使用From和To属性。

推荐阅读