Почему моя анимация пути WPF мигает?

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 с.

Если радиус равен 100, когда происходит MouseLeave, свойство 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 s - я изменил XAML выше, чтобы сделать это.

Answer 2

Всегда есть обычные виновники оборудования. Но я подозреваю, что это может иметь какое-то отношение к времени, затрачиваемому на выполнение анимации. Попробуйте увеличить продолжительность запуска анимации или скорректировать размер значений, между которыми вы перемещаетесь.

полсекунды - это не много времени для перехода от 100 к 15 и наоборот, так что вы можете просто столкнуться с отсутствием достаточно плавного перехода, что приводит к прерывистой анимации. Помните, что время является ключевым, и ваша цель должна быть не менее 30 кадров в секунду для плавной анимации.