是啥导致我的动画闪烁

Posted 2023-02-19

【中文标题】是啥导致我的动画闪烁

【英文标题】：What is causing my animation to flicker是什么导致我的动画闪烁

【发布时间】：2012-03-11 02:33:36

【问题描述】：

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

<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();

【问题讨论】：

我们可能需要看看 DragWindow 方法

我重现了这个问题。单击是 IsMouseOver 重新开始，但不是没有边框。我不知道为什么。如果您单击前 20 个，情节提要仅运行一次。如果你点击底部的 20-50，你会得到一个循环。我不知道答案，这就是我发表评论的原因。

我认为答案是事件冒泡的某个地方。如果您在 Border 上设置 IsHitVisable=false，则不会发生任何事情。我不知道答案，但它表明边界在偶数序列中。

【参考方案1】：

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

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

【参考方案2】：

这是由单击Frame 的扩展区域引起的。

MouseUp 事件似乎正在触发 MouseLeave/MouseEnter 事件。 MouseLeave 正在触发动画以缩小帧，这会将 Shrink 情节提要事件排队，MouseEnter 正在将动画排队以展开帧，从而将展开情节提要事件排队。通过缩小/扩展框架，MouseEnter/MouseLeave 再次被触发，动画都再次运行。这两个会不停地开火，直到你将鼠标移出只有在 Frame 展开时才会占据的魔法区域。

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

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

例如，如果MouseUp 事件触发MouseLeave 和MouseEnter 事件，那么MouseLeave 应该排队折叠动画，但延迟一秒并检查鼠标是否真的在对象上方一秒后.如果没有，请取消折叠事件。这将导致MouseLeave 事件不触发其动画，这意味着它不会无休止地排队动画，直到鼠标移出展开的 Frame 区域。