Question

我正在做一个按预期工作的简单动画，直到我在网格周围放置一个边框。一旦我这样做，当鼠标点击框架时动画闪烁。我正在尝试实现一个“滑动”进入视图的菜单。我在下面提供了我的代码。它几乎像我的鼠标点击导致无限的动画循环。

<Border  BorderBrush="YellowGreen" CornerRadius="8" BorderThickness="10" Background="Black">
        <Grid MouseLeftButtonDown="DragWindow">
            <Grid.Resources>
                    <Style TargetType="Frame" x:Key="GrowingFrameStyle">
                        <Setter Property="Foreground" Value="#505050"/>
                        <Setter Property="Background" Value="Black" />
                        <Setter Property="Height" Value="20" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" />
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="SteelBlue" />
                                            <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="50" Duration="0:0:.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" />
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="Black" />
                                            <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="20" Duration="0:0:.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Label Grid.Row="1" Grid.ColumnSpan="2" Background="Black"/>
            <Frame Grid.RowSpan="2" Grid.ColumnSpan="2" Background="SlateBlue" VerticalAlignment="Top" Style="{StaticResource GrowingFrameStyle}"/>        
        </Grid>
    </Border>

只有

背后的代码中的方法

private void DragWindow(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
  DragMove();
}

Answer 1

这是由点击Frame的展开区域引起的。

MouseUp事件似乎触发了MouseLeave / MouseEnter事件。 MouseLeave正在触发动画以缩小框架，该框架对Shrink故事板事件进行排队，MouseEnter将动画排队以展开框架，该框架将展开Storyboard事件排队。通过缩小/扩展框架，MouseEnter / MouseLeave再次被触发，动画再次运行。这两个人不停地射击，直到你将鼠标移出仅在扩展框架时被占用的魔法区域。

您可以通过向故事板添加BeginTime="00:00:02"来添加2秒延迟来查看慢动作的延迟，并且您可以通过附加一个来验证MouseEnter / MouseLeave事件在Frame的MouseEnter / MouseLeave事件中将行写入输出的方法。

至于修复它，我不确定最好的方法。也许尝试使用MouseEnter / MouseLeave事件在1秒延迟后手动触发事件，前提是该事件仍应处理。

例如，如果MouseUp事件触发MouseLeave和MouseEnter事件，那么MouseLeave应该对崩溃动画进行排队，但会延迟一秒并检查鼠标是否实际上是在一秒钟后超过了对象。如果没有，请取消崩溃事件。这将导致MouseLeave事件不触发其动画，这意味着它不会无休止地对动画进行排队，直到鼠标移出扩展的Frame区域。

Answer 2

为了防止动画闪烁，您可以在 EnterAction 中删除 From="20"，并在 ExitAction 中删除 To="20"。

动画无论如何都将使用“20”，因为这已经是基值，除非该值因动画已经在进行中而不同，因此它实际上只是反转动画而不是闪烁（每次重置为 20动画被触发）。

是什么导致我的动画闪烁

2 个答案: