Question

为什么以下动画在MouseLeave上闪烁并表现得很傻？如果可以重新编辑，我会发布一个截屏视频。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas>
    <Path Fill="Blue" Margin="15,15,15,15">
      <Path.Data>
        <!-- Describes an ellipse. -->
        <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
          <BeginStoryboard>
            <Storyboard Duration="0:0:.5">
              <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
                         Storyboard.TargetProperty="RadiusX"
                         From="15" To="100" />
              <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
                         Storyboard.TargetProperty="RadiusY"
                         From="15" To="100" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
          <BeginStoryboard>
            <Storyboard Duration="0:0:.5">
              <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
                         Storyboard.TargetProperty="RadiusX"
                         From="100" To="15" />
              <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" 
                         Storyboard.TargetProperty="RadiusY"
                         From="100" To="15" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Canvas>
</Page>

Answer 1

原因是您在From上指定了DoubleAnimation。

如果MouseLeave发生时半径小于100，则From属性会使其跳至100并可能导致MouseEnter。然后，你有两个竞争动画，鼠标事件变得疯狂，因为椭圆半径在光标下方闪烁。

解决方案是省略From属性，这将导致动画从当前半径的任何位置开始：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1">
    <Canvas>
        <Path Margin="15,15,15,15" Fill="Blue">
            <Path.Data>
                <!-- Describes an ellipse. -->
                <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15"/>
            </Path.Data>
            <Path.Triggers>
                <EventTrigger RoutedEvent="UIElement.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="100"/>
                            <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="100"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="UIElement.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="15"/>
                            <DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="15"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Canvas>
</Page>

在不相关的注释中，当您设置Storyboard.Duration时，它不会加快您的孩子动画，它会过早地结束Storyboard。你真的想在你的孩子Duration上设置DoubleAnimation - 我已经修改了上面的XAML来做到这一点。

Answer 2

总是存在通常的硬件罪魁祸首。但我怀疑它可能与执行动画所花费的时间有关。尝试增加动画运行的时间长度，或者调整要在其间移动的值的大小。

半秒没有太多时间从100过渡到15，反之亦然，所以你可能只是遇到没有足够平滑过渡的情况，导致动画不稳定。请记住，时间是关键，目标应至少为30 fps，以获得流畅的动画效果。

为什么我的WPF路径动画会闪烁？

2 个答案: