Question

我在UserControl的XAML源中定义了一个故事板。只要调用此函数，就会播放它：

/// <summary>
/// Plays highlight animation.
/// </summary>
public void Highlight()
{
    Storyboard highlighter = FindResource("Highlight") as Storyboard;
    highlighter.Begin(this, true);
}

只要在调用此函数时动画尚未播放，这种方法效果很好。当我在故事板完成播放之前调用该函数时，动画会无限期地卡住。为什么会这样？这是动画的来源：

<Storyboard x:Key="Highlight" AutoReverse="True">
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
        <EasingColorKeyFrame KeyTime="0:0:0.15" Value="LightGray">
            <EasingColorKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingColorKeyFrame.EasingFunction>
        </EasingColorKeyFrame>
    </ColorAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
            <EasingDoubleKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
            <EasingDoubleKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

如果故事板在完成播放前获得新的Begin电话，如何确保动画不会卡住？我可以在每个函数调用时重新启动动画，或者在播放时没有触发新动画。无论出于何种原因，这都会产生异常无法执行操作，因为指定的Storyboard未应用于此对象以进行交互式控制：

Storyboard highlighter = FindResource("Highlight") as Storyboard;
if (highlighter.GetCurrentState(this) == ClockState.Stopped)
    highlighter.Begin(this, true);

更新：我尝试了基于XAMIMAX答案的基于XAML的解决方案，但是当我使用它时，不会播放任何动画。

<UserControl.Triggers>
    <EventTrigger RoutedEvent="local:StatusIcon.HighlightRequested">
        <EventTrigger.EnterActions>
            <BeginStoryboard x:Name="bidHighlight" Storyboard="{StaticResource Highlight}" />
        </EventTrigger.EnterActions>
        <EventTrigger.ExitActions>
            <StopStoryboard BeginStoryboardName="bidHighlight" />
        </EventTrigger.ExitActions>
    </EventTrigger>
</UserControl.Triggers>

Answer 1

当我在关键帧0明确定义每个动画属性的起始值时，我的问题就消失了。这是我的代码：

<Storyboard x:Key="Highlight" AutoReverse="True">
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
        <EasingColorKeyFrame KeyTime="0" Value="White"/>
        <EasingColorKeyFrame KeyTime="0:0:0.15" Value="LightGray">
            <EasingColorKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingColorKeyFrame.EasingFunction>
        </EasingColorKeyFrame>
    </ColorAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
            <EasingDoubleKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
            <EasingDoubleKeyFrame.EasingFunction>
                <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="LayoutRoot">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Answer 2

如果您想通过xaml：

进行此操作

Assumption - Models or View Models Implement INotfifyPropertyChanged

让我们说你有一个电影列表

<ListView 
            ScrollViewer.CanContentScroll="False" 
            x:Name="lsvMovies" 
            ItemsSource="{Binding Movies}"
            SelectedItem ="{Binding SelectedMovie}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="Auto" Header="Code"          DisplayMemberBinding="{Binding ID}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Description"   DisplayMemberBinding="{Binding Desc}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Qty"           DisplayMemberBinding="{Binding Qty}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Gross"         DisplayMemberBinding="{Binding Price}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Discount %"    DisplayMemberBinding="{Binding Discount}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Net"           DisplayMemberBinding="{Binding Gross}"></GridViewColumn>
                    <GridViewColumn Width="Auto" Header="Title"         DisplayMemberBinding="{Binding Title}"></GridViewColumn>
                </GridView>
            </ListView.View>
            <ListView.GroupStyle>
                <GroupStyle ContainerStyle="{StaticResource GroupedView}"/>
            </ListView.GroupStyle>
        </ListView>

忽略它在扩展器上的GroupStyle。

<Style x:Key="{x:Type ListViewItem}" TargetType="ListViewItem">
    <Style.Triggers>
        <DataTrigger Binding="{Binding BidChangeDirectionIndicator}"
                     Value="-1">
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="bidDownStory">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
                            <EasingColorKeyFrame KeyTime="0:0:0.15" Value="LightGray">
                                <EasingColorKeyFrame.EasingFunction>
                                    <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
                                </EasingColorKeyFrame.EasingFunction>
                            </EasingColorKeyFrame>
                        </ColorAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
                            <EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.6">
                                <EasingDoubleKeyFrame.EasingFunction>
                                    <ElasticEase EasingMode="EaseIn" Oscillations="1"/>
                                </EasingDoubleKeyFrame.EasingFunction>
                            </EasingDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="bidDownStory" />
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

将Style放在您需要的任何位置。 HTH
此样式基于此问题WPF DataTriggers

随后调用storyboard.Begin（this，true）会阻塞动画

2 个答案: