C# 动画仅在wpf中第一次出现

我的布局如下：

Grid x:Name="layoutRoot"
  |--ListBox
  |--Grid x:Name="detailsBaloon"

最初，我的详细信息巴隆的财产： ScaleX=0和ScaleY=0 所以它是不可见的

现在，当用户选择listBox的任何项目时，我希望childGrid通过一些动画变得可见，其中我将ScaleX和ScaleY设置为1。它工作得很好。现在，当用户选择另一个项目时，我的意思是在列表框中更改选择，然后我希望显示相同的动画。但这一次，动画根本不会出现

这是我的密码：

<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SwatchColorsDataSource}}">
    <Grid.Resources>
        <Storyboard x:Key="detailsBaloonVisibilityAnimation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="detailsBaloon">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="detailsBaloon">
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                <EasingDoubleKeyFrame.EasingFunction>
                    <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>

    <ListBox x:Name="SwatchListBox" ItemTemplate="{DynamicResource SwatchTemplate}" ItemsSource="{Binding XPath=/Swatches/Swatch}" ItemContainerStyle="{DynamicResource Colors_ListBoxStyle}" ItemsPanel="{DynamicResource ItemsPanelTemplate1}">       
        <ListBox.Triggers>
            <EventTrigger RoutedEvent="ListBox.SelectionChanged">
                <EventTrigger.Actions>
                    <BeginStoryboard Storyboard="{StaticResource ResourceKey=detailsBaloonVisibilityAnimation}" />
                </EventTrigger.Actions>
            </EventTrigger>
        </ListBox.Triggers>
        <ListBox.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF5B5959" Offset="0"/>
                <GradientStop Color="#FF242222" Offset="1"/>
            </RadialGradientBrush>
        </ListBox.Background>
    </ListBox>
    <Grid x:Name="detailsBaloon" HorizontalAlignment="Left" Height="230" Margin="78.8,26.4,0,0" VerticalAlignment="Top" Width="280" DataContext="{Binding SelectedItem, ElementName=SwatchListBox}" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="0" ScaleY="0"/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Path Data="M0.5,4.5 C0.5,2.290861 2.290861,0.5 4.5,0.5 L259.5,0.5 C261.70914,0.5 263.5,2.290861 263.5,4.5 L263.79983,194.9999 C321.40044,282.59975 344.6003,286.99993 251.79984,214.19991 L4.5,213.5 C2.290861,213.5 0.5,211.70914 0.5,209.5 z" Fill="#FF2E2727" Margin="7,9,-41.778,-44.576" Stretch="Fill" Stroke="Black"/>
        <TextBlock Height="30" Margin="14.6,22,15.4,0" TextWrapping="Wrap" Text="{Binding XPath=Theme}" VerticalAlignment="Top" Width="250" Foreground="White" FontSize="21.333"/>
        <Rectangle Fill="{Binding XPath=Color1}" HorizontalAlignment="Left" Margin="18.6,68.6,0,76.4" RadiusY="4" RadiusX="4" Stroke="Black" Width="70" Height="85"/>
        <Rectangle Fill="{Binding XPath=Color2}" Margin="102.6,68.6,107.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black"/>
        <Rectangle Fill="{Binding XPath=Color3}" Margin="0,68.6,23.4,76.4" RadiusY="4" RadiusX="4" Stroke="Black" HorizontalAlignment="Right" Width="70"/>
        <TextBlock HorizontalAlignment="Left" Height="19.8" Margin="24.6,0,0,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color1}" VerticalAlignment="Bottom" Width="70" Foreground="White"/>
        <TextBlock Height="19.8" Margin="109.6,0,100.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color2}" VerticalAlignment="Bottom" Foreground="White"/>
        <TextBlock Height="19.8" Margin="0,0,15.4,51.6" TextWrapping="Wrap" Text="{Binding XPath=Color3}" VerticalAlignment="Bottom" Foreground="White" HorizontalAlignment="Right" Width="70"/>
    </Grid>
</Grid>

在动画中，From和To需要指定，因为您没有在动画中定义From值，这就是为什么动画不会在每个选择上进行升级。这里是从=到=1

您的动画方法如下所示

我添加了额外的DoubleAnimationUsingKeyFrames在keytime 0处定义From=“0”，以便在每个选择上缩放栅格

 <Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <Storyboard x:Key="detailsBaloonVisibilityAnimation">
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames  Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="scale">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <ElasticEase EasingMode="EaseOut" Oscillations="2" Springiness="5"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Grid.Resources>
    <ListBox x:Name="SwatchListBox" Background="Gray">
        <ListBox.Triggers>
            <EventTrigger SourceName="SwatchListBox" RoutedEvent="Selector.SelectionChanged">
                <EventTrigger.Actions>
                    <BeginStoryboard  Storyboard="{StaticResource detailsBaloonVisibilityAnimation}"/>
                </EventTrigger.Actions>
            </EventTrigger>
        </ListBox.Triggers>
        <ListBoxItem>1</ListBoxItem>
        <ListBoxItem>2</ListBoxItem>
        <ListBoxItem>3</ListBoxItem>
    </ListBox>
    <Grid x:Name="detailsBaloon" Background="Red" HorizontalAlignment="Right" Height="230" VerticalAlignment="Top" Width="280" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="scale"  ScaleX="0" ScaleY="0"/>
        </Grid.RenderTransform>
    </Grid>
</Grid>

1.
2.
3.

感谢Heena向我解释了我所犯的问题和错误。你能给我一些在deep学习动画的好链接吗？@Vishal你是受欢迎的：）我从MSDN、CODEPROJECT和StackOverflow学习了所有东西..说真的，我不知道学习动画的任何特殊链接..但是看看这个..这可能会有帮助..谢谢：）谢谢链接。我会逐一看一看。当然，我不会使用混合，因为我想学习动画。1个小问题，如果您知道答案：假设我想将listbox项移动到其他控件之外，仅用于动画目的。为此，我创建了故事板，效果很好，但唯一的问题是当listboxItem移动到listbox的边界之外时，它们不可见。抱歉，我不知道如何制作此动画。